of the 中 的-content-template-container

In angular, there are three such built-in label, but there is no explanation in the angular document, there is only a simple description in api, and explore a long time to get to know Editor's Note.

of-content

<div>
  <ng-content select=".header">

  </ng-content>
  <hr/>
  <ng-content select=".footer">

  </ng-content>
</div>

ng-content has a select attribute, the attributes can be selected corresponding to the embedded tag, which means that .header selected class = header label to the current position of the filling

<app-contentdemo>
  <div class="header">
    header
  </div>
  <div class="footer">
    footer
  </div>
</app-contentdemo>

General layout class components are implemented using ng-content, such as ng-zorror layout of components may be implemented using ng-content

of container

ng-container at the interface is no sense in reviewing the elements of the browser, you can not see it, container means that container. Installed only things that will not be displayed.

<a-container> 
  <h1> test </ h1> 
</ container-of>

 

 

the template

template is a template meant, ng-template tag is mainly used to load a template.

<a-template> 
  <h2>模板</ h2> 
</ the-template>

　　But if so, the browser will not render. You must use [ngif] = ture or ngTemplateOutlet to let rendered template content

Use [ngif] = true

<ng-template [ngIf]="true" ]>
  <h2>模板</h2>
</ng-template>

 

 Use ngTemplateOutlet

<a container-* ngTemplateOutlet = " hello " > </ container-of> 
 <a template #greet> <span> Hello </ span> </ the-template>

 

 

Context template in a nested assembly

Primeng used when the table element, there will be nested ng-template, and can be obtained in the object context. This is how to do it?

Can pass a context ngTemplateOutlet, go directly to the object is passed like

<table style="width: 100%">
  <thead>
  <tr>
    <th *ngFor="let label of labellist">{{label}}</th>
  </tr>
  </thead>
  <tbody>
  <ng-container *ngFor="let item of data;let i = index">
    <tr>

      <ng-container *ngFor="let row of tableColumn">
        <td style="" align="center">
          <ng-container *ngIf="row.prop">
            <label>+</label>
            {{item[row.prop]}}
          </ng-container>
          <ng-container *ngIf="row.scope">
            <ng-container *ngTemplateOutlet="row.scope;context:{row:item}"></ng-container>
          </ng-container>
        </td>
      </ng-container>
    </tr>
  </ng-container>
  </tbody>
</table>

use

<app-apptable [data]="data">
  <app-app-col label="用户名" prop="username"></app-app-col>
  <app-app-col label="密码" prop="pwd"></app-app-col>
  <app-app-col label="昵称" prop="pwd"></app-app-col>
  <app-app-col label="测试" scope="scope">
    <ng-template #scope let-data="row">
      <span style="color: red">00-{{data.username}}</span>
    </ng-template>
  </app-app-col>
</app-apptable>

In ng-teamplate in #scope is the current name of the template reference, let-xxxx is defined for accepting context object properties of the current scope,

Then xxx class scope template, can be used to let-xxx is the point that the object ngTemplateOutlet context transfer.

My understanding is almost over in front of the three labels