Angular 2。如何在标签 "URL"中使用 *ngFor 设置 "href"并在条件 *ngIf 中设置 '{{theme.name}}'？

Question

我需要切换模板。我有 12 个 css 文件需要动态加载

我有一个模板 html。例如(硬编码):

<div class="container">
    <link rel='stylesheet'   href="/app/switchTemplate/css/amelia/bootstrap.min.css" *ngIf="currentTheme.name === 'amelia'" />
</div>

当我使用 <*ngFor="let theme of themes"> 作为标签 "href"它不起作用(动态)

<div class="container">
    <link rel='stylesheet'  *ngFor="let theme of themes"  href="{{theme.url}}" *ngIf="currentTheme.name === '{{theme.name}}'" />
</div>

如何使用 *ngFor 在标签“href”中设置“URL”并在条件 *ngIf 中设置“{{theme.name}}”？

Answer 1

单个元素上不能有多个结构指令。您可以使用 <template>标记但新的 <ng-container> element 更方便，因为它使用与普通元素上的结构指令相同的语法:

<div class="container">
  <ng-container *ngFor="let theme of themes">
    <link rel='stylesheet'    href="{{theme.url}}" *ngIf="currentTheme.name === theme.name" />
  </ng-container>
</div>

<template>或 <ng-container>元素仅由 Angular2 在内部处理，不会添加到 DOM。