は、どのように私は（構造は全く同じである）の角材料表と共通の要素を持っているマット・テーブルのカラム

Question

Link to stackblitz

にコンテンツを投影することができます。だから私はいくつかの列をNG-コンテンツを使用して変更したい：私はレイアウトのようにそれを使用していくつかのデータを投影する理由

@Component({ 
    selector: 'table-basic-example', 
    styleUrls: ['table-basic-example.css'], 
    templateUrl: 'table-basic-example.html', 
}) 
export class TableBasicExample { 
    displayedColumns = ['test', 'name']; 
    dataSource = new MatTableDataSource<Element>(ELEMENT_DATA); 
} 

const ELEMENT_DATA: { name: string } = [ 
    {name: 'Hydrogen'}, 
    {name: 'Helium'}, 
    {name: 'Lithium'}, 
    {name: 'Beryllium'}, 
    {name: 'Boron'}, 
]; 

<div class="example-container mat-elevation-z8"> 
    <mat-table #table [dataSource]="dataSource"> 

    <!-- Position Column --> 
    <ng-container matColumnDef="test"> 
     <mat-header-cell *matHeaderCellDef>Test</mat-header-cell> 
     <mat-cell *matCellDef="let element"> 

     <ng-content select="[test]"></ng-content> 

     </mat-cell> 
    </ng-container> 

    <!-- Name Column --> 
    <ng-container matColumnDef="name"> 
     <mat-header-cell *matHeaderCellDef> Name </mat-header-cell> 
     <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell> 
    </ng-container> 

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row> 
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row> 
    </mat-table> 
</div> 

であること。だから私は、別のコンポーネントがあります。

<table-basic-example> 

    <div test> 
    test 
    </div> 

</table-basic-example> 

をしかし、結果は非常に奇妙です。私は最後の行のちょうど投影を得た。 NG-コンテンツは動作しないことが理由

Link to stackblitz

Answer 1

あなたがここにngTemplateOutlet とngのテンプレートを使用する必要がありますがangulars-content-projection-trap-and-why-you-should-consider-using-template-outlet-instead

@Component({ 
    selector: 'table-basic-example', 
    styleUrls: ['table-basic-example.css'], 
    templateUrl: 'table-basic-example.html', 
}) 
export class TableBasicExample { 
    @Input() templateRef: TemplateRef<any>; 
    displayedColumns = ['test', 'name']; 
    dataSource = new MatTableDataSource<Element>(ELEMENT_DATA); 
} 

const ELEMENT_DATA: { name: string } = [ 
    {name: 'Hydrogen'}, 
    {name: 'Helium'}, 
    {name: 'Lithium'}, 
    {name: 'Beryllium'}, 
    {name: 'Boron'}, 
]; 

<div class="example-container mat-elevation-z8"> 
    <mat-table #table [dataSource]="dataSource"> 

    <!-- Position Column --> 
    <ng-container matColumnDef="test"> 
     <mat-header-cell *matHeaderCellDef>Test</mat-header-cell> 
     <mat-cell *matCellDef="let element"> 

     <!-- using ng-template with ngTemplateOutlet instead of ng-content --> 
     <ng-template [ngTemplateOutlet]="templateRef"></ng-template> 

     </mat-cell> 
    </ng-container> 

    <!-- Name Column --> 
    <ng-container matColumnDef="name"> 
     <mat-header-cell *matHeaderCellDef> Name </mat-header-cell> 
     <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell> 
    </ng-container> 

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row> 
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row> 
    </mat-table> 
</div> 

<table-basic-example> 

    <div test [templateRef]="columnTemplateRef"> 
    <ng-template #columnTemplateRef> 
     test 
    </ng-template> 
    </div> 

</table-basic-example>