Angular 2 - 我可以在<link rel =“stylesheet”tag =“”in =“”in =“”=“”<head =“”/>部分使用* ngIf吗?

时间:2018-01-09 20:37:35

标签: html css angular

Angular 2 - 我可以在head部分的link / stylesheet标签中使用* ngIf吗?

我想要这样的事情:

link rel='stylesheet' href="../assets/css/styles1.css" *ngIf="myvar === 'example'" 

由于

3 个答案:

答案 0 :(得分:0)

在此处查看此解决方案:
https://github.com/angular/angular-cli/issues/4202#issuecomment-339420111 由@TRAHOMOTO

   <link rel="stylesheet" href="/theme/css/vendor-rtl.min.css" *ngIf="(locale$ | async)?.isRtl else ltrVendor">
    <link rel="stylesheet" href="/theme/css/common-rtl.min.css" *ngIf="(locale$ | async)?.isRtl else ltrCommon">
    <link rel="stylesheet" href="/theme/css/application-rtl.min.css" *ngIf="(locale$ | async)?.isRtl else ltrApplication">

    <ng-template #ltrVendor>
      <link rel="stylesheet" href="/theme/css/vendor.min.css">
    </ng-template>
    <ng-template #ltrCommon>
      <link rel="stylesheet" href="/theme/css/common.min.css">
    </ng-template>
    <ng-template #ltrApplication>
      <link rel="stylesheet" href="/theme/css/application.min.css">
    </ng-template>

答案 1 :(得分:0)

尝试以下解决方案:

HTML:

<head> <link id="stylesheet" rel="stylesheet" href="style1.css"> </head>

TS:

import { DOCUMENT } from '@angular/platform-browser';

constructor (@Inject(DOCUMENT) private document) { }

ngOnInit() { this.document.getElementById('stylesheet').setAttribute('href', 'style2.css'); }

答案 2 :(得分:0)

指令和角度绑定只能在Angular组件的模板中使用。

您无法将<head>元素设置为Angular应用程序,因为将元素设置为Angular应用程序会清除元素原始内容。 Angular组件只能添加到Angular应用程序根元素中。

唯一的选择是使用命令式代码(如izulito的回答所示)。