• 创建结构指令

    创建结构指令

    我们将创建一个延迟组件或元素实例化的appDelay结构指令。 这可以潜在地用于美化效果或用用于手动处理组件加载的时间，无论是性能还是UX。

    1. @Directive({
    2.   selector: '[appDelay]'
    3. })
    4. export class DelayDirective {
    5.   constructor(
    6.     private templateRef: TemplateRef<any>,
    7.     private viewContainerRef: ViewContainerRef
    8.   ) { }
    10.   @Input()
    11.   set appDelay(time: number): void { }
    12. }

    View Example

    我们使用相同的@Directive类装饰器作为属性指令，并以相同的方式定义一个选择器。 这里的一个很大的区别是，由于结构指令的性质绑定到模板，我们可以访问TemplateRef，一个表示指令附加的template标签的对象。 我们还以类似的方式添加一个输入属性，但这次使用一个set处理程序，所以我们可以在Angular 2执行绑定时执行一些代码。 我们以与Angular 2内置结构指令完全相同的方式绑定delay 。

    1. @Component({
    2.   selector: 'app-root',
    3.   template: `
    4.     <div *ngFor="let item of [1,2,3,4,5,6]">
    5.       <card *delay="500 * item">
    6.         {{item}}
    7.       </card>
    8.     </div>
    9.   `
    11. })
    12. export class AppComponent {
    13. }

    View Example

    注意，没有内容在渲染。 这是由于Angular 2模拟html模板标签，并且默认情况下不渲染任何子元素。 为了能够渲染这个内容，我们必须将TemplateRef给出的模板作为嵌入视图附加到视图容器。