angular4 一些技巧 ng-content ng-template

主要内容：

1. ng-content
2. ng-template
3. *ngTemplateOutlet
4. ng-container

1， 2 原文链接 Angular2 Tips & Tricks

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 这篇文章讲的比较详细

使用 可以实现内容投影，这个相当于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

  

    
       // 此处有个 'select' 属性, 选择 'header'
    
  
  

      // 这里也有一个 ng-content
  

app.component中

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

// app.component.html

     // 内容投影
        
hello
        
someone like you
    

最后显示效果如下

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

  
Welcome
  
  

父组件

// app.component.html

   // 这个模板将被放在 子组件 中
     // let-name="name"为下上文名  '#myTemplate'问模板名
        hi {{ name }} on {{ data.toLocaleString() }}
    

    


// 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