创建结构指令

我们将创建一个延迟组件或元素实例化的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给出的模板作为嵌入视图附加到视图容器。