Angular2。 如何在標簽“ href”中使用* ngFor設置“ URL”，並在條件*​​ 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>

當我對標簽“ href”使用<* ngFor =“ let theme of themes”>時，它不起作用（動態）

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

如何在標簽“ href”中使用* ngFor設置“ URL”，並在條件*​​ ngIf中設置“ {{theme.name}}”？

Answer 1

單個元素上不能有多個結構指令。 您可以使用<template>標記，但是新的<ng-container>元素更為方便，因為它的語法與普通元素上的結構指令的語法相同：

<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中。