如何将数据传递到 ng-Container答案

【问题标题】：How can I pass data into a ng-Container如何将数据传递到 ng-Container
【发布时间】：2020-01-15 16:48:32
【问题描述】：

对不起。我是 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 中做这样的事情，但我不认为这样做：

&lt;ng-container *ngTemplateOutlet="LiTemplate || defaultTemplate; context: {item: item}"&gt;&lt;/ng-container&gt;

【问题讨论】：

标签： angular angular-template

【解决方案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>

【讨论】：

谢谢@raharshi-puli 这对我的小例子有用，我只需要将它添加到我的主要例子中。