Javascript 使用基于类实例类型的模板

我试图显示一个基于类数组的模板。我不知道我会怎么做这样的事情

我已经创建了两个模板，它们将被for循环引用。该模板如下所示：

一些文本

接下来，我创建了一个javascript组件，该组件如下所示：

@组件（{/*选项*/}）
导出类MyComponent{
构造函数（）{
此项。项目=[
新按钮类（），
新链接类（），
新按钮类（）
]
}
}

---

现在，当项目为

按钮类实例时，我如何使用
#按钮模板
；当项目为
链接类实例时，如何使用
#链接模板

<ul>
  <li *ngFor="let item of items">
     <ng-container *ngIf="item instanceOf LinkClass; then buttonTemplate else linkTemplate"></ng-container>
  </li>
</ul>

<ng-template #buttonTemplate>
  <button>Some Text</button>
</ng-template>

<ng-template #linkTemplate>
  <a href="">Some Text</a>
</ng-template>

与


映射项目以添加一个新字段，其中包含类名，例如：

在您的html中：

*ngIf="item.type === 'ClassX'; then X else X"

但请注意最后一个方法，ClassX.name是ES6的一个功能，因此它在IE11中不起作用。我最后使用的是
@ViewChild
，这允许我将模板返回到
ngTemplateOutlet

因此，除了
for
循环中的新
ng模板
，我的html没有太大变化





{{item.model.text}

在我的JavaScript/TypeScript中，我添加了一个
@ViewChild
，以及一个函数，该函数接受一个项并测试引用，并返回正确的
TemplateRef

@组件（{/*选项*/}）
导出类MyComponent{
@ViewChild（'buttonTemplate'，{static:true}）
公共按钮模板
@ViewChild（'linkTemplate'，{static:true}）
公共链接模板
公共物品=[
新按钮类（），
新链接类（），
新按钮类（）
]
getTemplate（项目）{
如果（ButtonClass的项目实例）返回此.ButtonCemplate
如果（LinkClass的项目实例）返回此.linkTemplate
}
}
你不能用
*ngIf
检查一下吗<代码>*ngIf=“item instanceOf LinkClass”
您可以创建组件。然后使用
ngFor
和
ngComponentOutlet
渲染循环中需要的任何组件您可以创建一个函数并将值传递给它`*ngIf=“isInstanceOf（value，'ButtonClass'）”@Nicolas IDK我是Angular的新手，如果有两种以上的类型怎么办，是否有
或者如果
？您也可以使用ngSwitch<代码>[ngSwitch]=“true”

，带有

*ngSwitchCase=“LinkClass的项目实例”

。我们使用的是

[ngSwitch]=“true”

，因为我们想检查哪个表达式的计算结果为true。您将如何处理两个以上的模板？在本例中可能会使用

ngSwitchCase

语法instance@c_ogoo你完全正确！！但是我不知道如何使用它的

实例。这不允许我在同一个元素上同时使用
*ngTemplateOutlet
和
*ngIf
，我如何将附加数据传递给模板？看起来更好！然而，我得到了
错误：意外的标记'instanceOf'
请记住，在'HTML'中直接使用方法对于angular生命周期不是一个好的做法（更多细节请参见chekc）好的，谢谢！这是另一个
<ng-container [ngTemplateOutletContext]="{myData:item}"
    [ngTemplateOutlet]="item instanceOf XXX ? template_A: null"></ng-container>

<ng-template #template_A let-myData='myData'>
  {{ myData.name }}
</ng-template>

*ngIf="isInstanceOfXXX(item); then X else X"

isInstanceOfXXX(item:any): item is ClassX{
   return item instance of ClassX;
}

items = items.map(item => ({...item,type: item.constructor.name}))

*ngIf="item.type === 'ClassX'; then X else X"