如何将数据从条件 ng-container 传递给 ng-template

如何解决如何将数据从条件 ng-container 传递给 ng-template

我的数据模型：

export class Contact {
  constructor(
    public type: ContactTypes,public name: string,public link?: string
  ) {
  }
}
export enum ContactTypes {
  Address = 'address-card-o',Phone = 'phone',Mobile = 'mobile',Email = 'envelope-o',FaceBook = 'facebook',Viber = 'viber',Instagram = 'instagram',Skype = 'skype',Linkedin = 'linkedin',VK = 'vk',Youtube = 'youtube-play',Messanger = 'messanger',}

迭代模型集合我需要根据它们的类型绘制图标。一些图标可能会以通常的方式被淹没，而另一些则需要特殊的规则。 所以我准备了一些templates：

<ng-template #viber>
    <p>viber icon is drawn</p>
</ng-template>

<ng-template #icon let-type="type">
    <p>{{type}} icon is drawn</p>
</ng-template>

模板由循环的 ng-container 使用：

<div class="cell" *ngFor="let c of $contacts | async">
    <a href="#">
        <ng-container *ngIf="c.type==='viber'; then viber; else icon; context: c">
        </ng-container>
        {{ c.name }}
    </a>
</div>

问题

在这个容器声明中，我得到了正确的模板，但我无法捕捉到传递给 icon 模板的参数。

有什么办法可以解决这个问题吗？

附注

• 角度版本：~11.2.3
• 似乎我对无条件的 ngTemplateOutlet 有同样的问题，我真的很困惑为什么这种方法不起作用（我们可以在 angular documentation 中找到类似的例子）：

<ng-container *ngTemplateOutlet="icon; content: c"></ng-container>

解决方法

使用 const client = new Client({ presence: { status: 'online',afk: false,activities: [{ name: ...,type: ...,}],},intents: [...],partials: [...],}); 代替 *ngTemplateOutlet 的一种可能方法

*ngIf

这里的表达式根据 <ng-container *ngTemplateOutlet="c.type==='viber' ? viber : icon; context: { $implicit: c }"> 决定使用哪个模板，然后使用带有 $implicit 的上下文

在模板中，我们可以使用 c.type

访问整个 c 对象

let-c

工作Stackblitz