如何將數據傳遞到 ng-Container

Question

對不起。 我是 Angular 的新手 :)

我正在嘗試將一些數據傳遞到模板中

這是調用 sharedComponent 的組件

 import { Component, OnInit } from '@angular/core'; @Component({ selector: 'sym-test', templateUrl: './test.component.html', styles: [] }) export class TestComponent implements OnInit { items = [ '111', '222', '333' ]; constructor() { } ngOnInit() { } }

 <p>test works!</p> <sym-shared [items]="items"> <ng-template LiTemplateDirective> <b>{{item}}</b> </ng-template> </sym-shared>

 import { Component, OnInit, Input, ContentChild, TemplateRef } from '@angular/core'; import { LiTemplateDirective } from '../li-template.directive'; @Component({ selector: 'sym-shared', templateUrl: './shared.component.html', }) export class SharedComponent implements OnInit { @Input() items: any[]; @ContentChild(LiTemplateDirective, { static: true, read: TemplateRef }) LiTemplate: TemplateRef<any>; constructor() { } ngOnInit() { } }

 <p>shared.component.html</p> <ul> <li *ngFor="let item of items; index as i;"> <ng-container *ngTemplateOutlet="LiTemplate || defaultTemplate;"></ng-container> </li> </ul> <ng-template #defaultTemplate> {{item}} - Default Template </ng-template>

默認情況下，我希望它有一個包含數組項數據和默認模板的項目符號列表......

• 111 - 默認模板
• 222 - 默認模板
• 333 - 默認模板

我的問題是如何將數據放入 ng-container 中？

我有點想在 shared.component.html 中做這樣的事情，但我不認為這樣做：

 <ng-container *ngTemplateOutlet="LiTemplate || defaultTemplate; context: {item: item}"></ng-container>

Answer 1

在 ng-container 中使用 [ngTemplateOutletContext] 並在 ng-template 上使用 let-item

     <ul>
        <li *ngFor="let item of items; index as i;">
            <ng-container [ngTemplateOutlet]="defaultTemplate" 
                 [ngTemplateOutletContext]="{item:item}"></ng-container>
        </li>
    </ul>

    <ng-template #defaultTemplate let-item='item'>
        {{item}} - Default Template
    </ng-template>