标签: angular2-template

此示例显示如何在子组件上使用@Input()批注.我的问题是你如何在根组件上使用它？例如,如果您修改上面链接上的代码:

@Component({
selector: 'app',
template: `
    <bank-account bank-name="RBC" account-id="4747"></bank-account>
`,
directives: [BankAccount]
})
class App {
    @Input() something: string;
}

bootstrap(App);

并在HTML中:

<app something="Test"></app>

上面的示例永远不会更新App组件上的某些属性.

我需要在Angular2中构建一个readmore指令.该指令将用于折叠并使用"Read more"和"Close"链接扩展长文本块.不是基于字符数,而是基于指定的最大高度.

<div read-more [maxHeight]="250px" [innerHTML]="item.details">
</div>

任何人都可以指导什么是最可靠的方法来获得/设置这种特定情况下的元素的高度.

关于如何实施这一具体指令的任何指导方针也将受到高度赞赏.

我需要构建类似这样的https://github.com/jedfoster/Readmore.js

解:

在Andzhik的帮助下,我能够构建满足我要求的以下组件.

import { Component, Input, ElementRef, AfterViewInit } from '@angular/core';

@Component({
    selector: 'read-more',
    template: `
        <div [innerHTML]="text" [class.collapsed]="isCollapsed" [style.height]="isCollapsed ? maxHeight+'px' : 'auto'">
        </div>
            <a *ngIf="isCollapsable" (click)="isCollapsed =! isCollapsed">Read {{isCollapsed? 'more':'less'}}</a>
    `,
    styles: [`
        div.collapsed {
            overflow: hidden;
        }
    `]
})
export class ReadMoreComponent implements AfterViewInit {

    //the text that need to be put in the container
    @Input() text: string;

    //maximum height of the container
    @Input() maxHeight: number …

检查用户是否在没有jQuery的情况下滚动到Angular2页面底部的最佳做法是什么？我是否可以访问我的应用程序组件中的窗口？如果不是我应该检查滚动到页脚组件的底部,我该怎么做？关于页脚组件的指令？有没有人完成这个？

遇到一个非常奇怪的问题,我的应用程序在一个非常具体的用户案例中行为不端.我有一个门户网站,用户可以在其中添加问题和答案,然后进行编辑.在这种情况下,当我删除一个集合(q + a)然后尝试添加它时,模型会更新,但我的视图从占位符获取值并更新自身.在这里,我只是拼接并推送数组中的值并使用ngFor进行渲染.最后一个元素是一个虚拟元素,用于输入向上推的值.

如果有任何意义,请附上屏幕截图.

您可以看到,对于文本框,ng-reflect-model显示正确的问题,但元素本身显示占位符文本.

这是一个关于如何使用Angular 2以"正确"方式实现所需功能的概念性问题.

我的应用程序有一个导航菜单,一个工具栏和一个内容区域.后者包含主要内容<router-outlet>并显示不同的视图,如列表和详细信息.

我想要实现的是工具栏显示不同的组件,具体取决于在内容区域中呈现的组件/视图.例如,列表组件需要工具栏中的搜索控件,而详细信息组件需要保存按钮.

A)我的第一次尝试是<router-outlet>在工具栏中添加另一个(命名)并根据静态路径显示工具栏组件.这有什么不妥之处:

1. 根据我的口味,静态内容工具栏关系过于松散.
2. 该关系在URL中可见(并且可更改).
3. 即使用户导航,工具栏插座也会保留此路径.

B)我的第二次尝试是命令性地导航到主视图组件中的工具栏组件(也使用命名的工具栏插座),ngOnInit它更紧密地耦合它.什么闻起来很糟糕:

1. A2
2. A3,为了防止这种情况我可以"清除"工具栏插座ngOnDestroy,但我还没有发现如何.

C)给路由器一个最后的机会,因为我发现这种工作:

const ROUTES: Routes = [
    {path: "buildings", children: [
        {path: "", component: BuildingListComponent, pathMatch: "full", outlet: "primary"},
        {path: "", component: BuildingListToolbarComponent, pathMatch: "full", outlet: "toolbar"},
        {path: ":id", component: BuildingDashboardComponent, outlet: "primary"}
    ]}
];

这个想法是路由器会选择每个插座的匹配路径.但是(不,它可能很容易)不幸的是,这不起作用:

const ROUTES: Routes = [
    {path: "buildings", children: [
        {path: "list", component: BuildingListComponent, pathMatch: "full", outlet: "primary"},
        {path: "list", component: BuildingListToolbarComponent, …

我有一个事件冒泡的情况.示例:

<td (click)="doSomething()">
  <text [innerHtml]="content"> 
        //  content of innerHtml is :  <a href="http://google.com"></a>
  </text>
</td>

标签通过innerHtml从另一个组件呈现.问题:当我点击链接时,也会触发元素的click事件.如何解决问题(停止传播doSomething()),知道事件处理程序(或任何角度2代码)不能通过innerHtml传递？

谢谢!

我有这样的日期管道模板

{{value | date: 'dd/MM/yyyy'}}

这value是null

如果我的值为null我如何处理这个字符串'object not match'？

我正在尝试使用角度材料2创建"右侧导航栏" md-sidenav.无论我做什么,它总是在左边.我怎样才能改为右侧呢？

  <md-sidenav #sidenavright mode="side" class="app-sidenav" opened="true">
    <app-question-rightnav></app-question-rightnav>
  </md-sidenav>

我有新的翻译问题ng-content.

假设我有一个组件my-component,在其ngOnInit()函数中对加载执行一些繁重的操作(现在,只是一个console.log()).

我有一个包装器,它通过transclusion(my-wrapper.component.html)显示内容.

<ng-content></ng-content>

如果我像这样设置周围环境,则日志语句不会显示:

<my-wrapper *ngIf="false">
    <my-component></my-component>
</my-wrapper>

我假设,my-wrapper组件没有构建,因此内容被忽略.

但是,如果我尝试将逻辑移动到my-wrapper像这样的组件(my-wrapper.component.html):

<ng-container *ngIf="false">
    <ng-content></ng-content>
</ng-container>

我总是看到console.log()输出.我猜,它my-component会被构建然后存储起来直到*ngIf变成true里面my-wrapper.

目的是建立一个通用的"列表项+细节"组件.假设我有一个N overview-elements(my-wrapper)列表,它们在*ngFor循环中呈现.my-component一旦我决定向特定项目显示更多信息,那么每个元素都有自己的详细信息组件(),它应该加载自己的数据.

overview.html:

<ng-container *ngFor="let item of items">
    <my-wrapper>
        <my-component id="item.id"></my-component>
    </my-wrapper>
</ng-container>

我-wrapper.component.html:

<div (click)="toggleDetail()">Click for more</div>
<div *ngIf="showDetail">
    <ng-content></ng-content>
</div>

有没有办法告诉Angular,在有必要将其添加到页面之前忽略已转换的内容？类似于它在AngularJS中的表现.

是否可以在一个内部使用<ng-content>(和它的选择选项)<ng-template>或它是否只在一个组件内工作？

<ng-container *ngTemplateOutlet="tpl">
  <span greetings>Hello</span>
</ng-container>

<ng-template #tpl>
  <ng-content select="[greetings]"></ng-content> World !
</ng-template>

上面的代码只渲染World !:(

这是现场的例子