如何将数据从条件 ng 容器传递到 ng 模板

Question

我的数据模型：

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 模板的参数。

有解决问题的方法吗？

P.S.

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

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

Answer 1

使用 *ngTemplateOutlet 代替 *ngIf

的一种可能方法

   <ng-container *ngTemplateOutlet="c.type==='viber' ? viber : icon; context: { $implicit: c }">

此处表达式根据c.type决定使用哪个模板，然后使用$implicit

的上下文

并且在模板中我们可以使用 let-c

访问整个 c 对象

<ng-template #viber let-c>
  <p>viber icon is drawn {{c.desc}}</p>
</ng-template>

<ng-template #icon let-c>
  <p>{{c.type}} icon is drawn</p>
</ng-template>

工作Stackblitz

如何将数据从条件 ng 容器传递到 ng 模板

How to pass data to ng-template from conditional ng-container

parameters

ng-template

angular

ng-container

ng-content

问题

P.S.