ng-container

• ng-container简单理解为一个逻辑容器，用来做一些逻辑处理的。
• ng-container既不是一个Component，也不是一个Directive，只是单纯的一个特殊tag。
• 这点类似于template，Angular复用了HTML5规范中template 的tag的语义，不过并没有真正利用其实现，
  • 因此在审查元素中是永远也找不到一个template元素的。
• 不过，由于ng-container并不是HTML5中的，为了保持区分度，采用了ng-作为前缀。
  • 所以现在我们可以知道，ng-container是Angular所定义的一个特殊tag。

使用场景

• ngFor和ngIf不能同时处在一个元素上。
  • 所以想要在不添加额外的html标签的情况下达到同样的效果就得请出ng-container。
• 逻辑处理；

@Component({
  selector: 'app-table',
  template: `
    <div *ngFor="let line of data">
      <ng-container *ngTemplateOutlet="lineHeaderTmpl,context: { $implicit: line }"></ng-container>
      <div *ngFor="let element of line.values">
        <ng-container *ngTemplateOutlet="lineContentTmpl,context: { $implicit: element }"></ng-container>
      </div>
    </div>
  `
})
export class AppTableComponent  {
  @Input() data: any;
  @ContentChild('lineHeader') lineHeaderTmpl: TemplateRef<any>; 
  @ContentChild('lineContent') lineContentTmpl: TemplateRef<any>; 
}

<app-table [data]="myData">
  <ng-template #lineHeader let-line>
    <div>{{line.name}}</div>
  </ng-template>
   <ng-template #lineContent let-element>
    <div>{{element.name}}</div>
   </ng-template>
</app-table>