如何将数据传递到 ng-Container

Question

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

我正在尝试将一些数据传递到模板中

这是调用共享组件的组件

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>

如何将数据传递到 ng-Container

How can I pass data into a ng-Container

angular-template

angular