Angular 自定义结构指令

1. 元素

import { Component, TemplateRef, ViewContainerRef, ViewChild,
  AfterViewInit } from '@angular/core';
@Component({
  selector: 'app-code404',
  template: `
  
    
      Big Keriy !
    
  `,
})
export class Code404Component implements AfterViewInit{

  // @ViewChild 装饰器获取模板元素
  @ViewChild('tpl')
  tplRef: TemplateRef;
  constructor(private vcRef: ViewContainerRef) {}
  ngAfterViewInit() {
    
    // 使用ViewContainerRef对象的createEmbeddedView方法创建内嵌视图。
    this.vcRef.createEmbeddedView(this.tplRef);
  } }

这样其实我们在视图中就得到了一个什么...啊，就是一个'Big Keriy !'的字符串。

2. ngTemplateOutlet指令

a. ngTemplateOutlet
和routerOutlet是一个意思，将视图(标签中的内容)放到对应的ngTemplateoutlet下面。

import { Component } from '@angular/core';
  @Component({
    selector: 'app-code404',
    template: `
      
        Hello, Semlinker!
      
      
        Big Keriy !
      
      

      

`, })
  export class Code404Component { }

最终的视图应该是：

Big Keriy !
Hello, Semlinker!

b. ngOutletContex
看名字就知道意思。
ngTemplateOutlet指令基于TemplateRef对象，在使用ngTemplateOutlet指令时，可以通过ngTemplateOutletContext属性来设置来设置EmbeddedViewRef的上下文对象。可以使用let语法来声明绑定上下文对象属性名。

import { Component, TemplateRef, ViewContainerRef, ViewChild,
  AfterViewInit } from '@angular/core';
@Component({
  selector: 'app-code404',
  template: `
    
    
      
{{message}}
    
    
    
      
{{msg}}
    
    
    
      
{{msg}}
    
    

    
    

    
    

    
  `,
})
export class Code404Component implements AfterViewInit{
  @ViewChild('tpl')
  tplRef: TemplateRef;
  constructor(private vcRef: ViewContainerRef) {}
  ngAfterViewInit() {
    this.vcRef.createEmbeddedView(this.tplRef);
  }
  context = { message: 'Hello ngOutletContext!',
    $implicit: 'great, Semlinker!' };
    // 这里的$implicit是固定写法
}

先看输出的视图：

Hello ngOutletContext!
Hello ngOutletContext!
Hello, Semlinker!

3. ngComponentOutlet指令

听着名字就很爽，这不是插入视图的，是插入组件的！

该指令使用声明的方式，动态加载组件。

先写组件，里面有两个。。组件：

  @Component({
    selector: 'alert-success',
    template: `
      
Alert success
    `,
  })
  export class AlertSuccessComponent { }
  @Component({
    selector: 'alert-danger',
    template: `
      
Alert danger
    `,
  })
  export class AlertDangerComponent { }
  @Component({
    selector: 'my-app',
    template: `
      
Angular version 4
      
      Change component
  `, })
  export class AppComponent {
     alert = AlertSuccessComponent;
    changeComponent() {
      this.alert = AlertDangerComponent;
  } 
}

当然，还需要在模块中声明入口：

// app.module.ts
@NgModule({
    // ...
    declarations: [
      AppComponent,
      SignUpComponent,
      AlertSuccessComponent,
      AlertDangerComponent
    ],
    entryComponents: [       // 这里面写指令中呀用到的组件
      AlertSuccessComponent,
      AlertDangerComponent
],
// ...
})

这样就可以使用ngComponentOutlet指令来插入组件玩耍了：

这是一个完整语法简单的例子：

// ...
@Component({
  selector: 'ng-component-outlet-complete-example',
  template: `
    `
})
class NgTemplateOutletCompleteExample {
  // This field is necessary to expose CompleteComponent to the template.
  CompleteComponent = CompleteComponent;
  myInjector: Injector;
 
  myContent = [[document.createTextNode('Ahoj')], [document.createTextNode('Svet')]];
 
  constructor(injector: Injector) {
    this.myInjector = ReflectiveInjector.resolveAndCreate([Greeter], injector);
  }
}

4. 创建结构指令

也想不出来一个什么好例子，抄一个例子过来：

// uless.directive.ts

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
  @Directive({
      selector: '[exeUnless]'
  })
  export class UnlessDirective {
      @Input('exeUnless')
      set condition(newCondition: boolean) {  // set condition
          if (!newCondition) {
              this.viewContainer.createEmbeddedView(this.templateRef);
          } else {
              this.viewContainer.clear();
          } 
      }
      constructor(private templateRef: TemplateRef,
          private viewContainer: ViewContainerRef) {
      } 
  }


  import { Component } from '@angular/core';
  @Component({
    selector: 'app-root',
    template: `
     
Hello, Semlinker!
    `,
  })
  export class AppComponent {
    condition: boolean = false;
  }
  
  
  // app.component.ts
  
  import { Component } from '@angular/core';
  @Component({
    selector: 'app-root',
    template: `
     
Hello, Semlinker!
    `,
  })
  export class AppComponent {
    condition: boolean = false;
  }

本文部分摘自Semlinker的Angular 4 指令快速入门，感谢作者的分享。