angular4 一些技巧 ng-content ng-template

主要内容：

ng-content
ng-template
*ngTemplateOutlet
ng-container

3, 4 原文链接 Angular ng-template, ng-container and ngTemplateOutlet - The Complete Guide To Angular Templates

1. Content Projection (内容投影)

Content Projection in Angular with ng-content 这篇文章讲的比较详细

使用 <ng-content></ng-content> 可以实现内容投影，这个相当于angular1.x中的 transclude。这个还有一个 select 属性，用来选择投影的内容。

内容投影就是在组件内部有1个或者多个槽点(slots)。多用于Sections或Dialogs, 外部样式固定，内部包含实际的内容。

// section.component.ts
@Component({
  selector: 'app-section',
  templateUrl: './section.component.html',
  styleUrls: ['./section.component.css']
})
export class SectionComponent implements OnInit {
  private visible: boolean = true; // 用来控制显示或隐藏
  constructor() { }
  ngOnInit() {
  }
}
// section.component.html
<div>
  <h1>
    <a href="#" (click)="visible = !visible">
      <ng-content select="header"></ng-content> // 此处有个 'select' 属性, 选择 'header'
    </a>
  </h1>
  <section *ngIf="visible">
    <ng-content></ng-content>  // 这里也有一个 ng-content
  </section>
</div>

app.component中

// app.component.ts
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
}

// app.component.html
<div>
    <app-section> // 内容投影
        <header>hello</header>
        <p>someone like you</p>
    </app-section>
</div>

最后显示效果如下

ng-content.png

可以看出有 select 属性的就只显示选择的内容，没有改属性的会显示剩下的内容，而不是全部都显示

ng-template 模板插件(template outlet)

ngTemplateOutlet 接受一个 模板引用 和一个上下文对象的模板插件，相当于Angular1.x中的 ng-included.也可以类比 router-outlet,相当于 其它模版的入口

// section.component.ts
import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-section',
  templateUrl: './section.component.html'
})
export class SectionComponent implements OnInit {
  @Input() name: string; // 父组件传入的上下文
  @Input() template: any; // 父组件传入的模板名称
  
  constructor() { }
  ngOnInit() {
  }
}

// section.component.html
<div>
  <h1>Welcome</h1>
  <ng-template // 这里插入其他的模板内容
    [ngTemplateOutlet]="template" // 模板名
    [ngOutletContext]="{ name: name }" // 上下文对象
  >
  </ng-template>
</div>

父组件

// app.component.html
<div>
   // 这个模板将被放在 子组件 <app-section>中
    <ng-template let-name="name"  #myTemplate> // let-name="name"为下上文名  '#myTemplate'问模板名
        hi <strong>{{ name }}</strong> on {{ data.toLocaleString() }}
    </ng-template>

    <app-section 
        [name]="customer"        // 上下文名
        [template]="myTemplate"  // 模板名
    ></app-section>
</div>

// app.component.ts
import { Component, Input, ViewChild } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  @ViewChild('myTemplate') myTemplate: any;

  data: Date = new Date();
  customer: string = 'James';
}

可以看出父组件中，对要插入的模板可以使用 let-name=name 创建模板的上下文对象名， #myTemplate 用来创建模板名。

子组件中需要引入动态的模板，可以使用 [ngTemplateOutlet]="outerTemplate" 来表示引入的外部模板名，使用 [ngOutletContext]="{name: name}" 来表示下上文对象

最后显示效果：

ng-template.png

angular4 一些技巧 ng-content ng-template