如何将数据从条件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

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

<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决定使用哪个模板，然后使用带有$implict 的上下文

在模板中，我们可以使用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>

工作堆叠