在Angular 2中的组件上动态设置样式表href答案

【问题标题】：Set stylesheet href dynamicaly on a component in Angular 2在Angular 2中的组件上动态设置样式表href
【发布时间】：2017-03-28 08:41:18
【问题描述】：

我已经构建了一个组件，我想让它更可重用，这样我就可以在更多项目中使用它。我想在模板上创建组件时传递样式表引用，如下所示：

<dynamic-css [myStyle]= "route/my-stylesheet.css"></dynamic-css>

我的第一个方法是将它链接到组件模板中，如下所示：

<link rel="stylesheet" [attr.href]="myStyle">
<div>My dynamic-css component content</div>

但是我不工作，控制台抛出错误；

找不到未定义的属性“css”

这是我的组件的虚拟版本：

@Component({
    selector:'dynamic-css',
    template: `
         <link rel="stylesheet" [attr.href]="myStyle">
         <div>My dynamic-css component content</div>
    `
})

export class DynamicCssComponent{
    @Input myStyle:string;
}

是否有任何方法可以将 href 正确传递给组件，或者以其他方式动态设置样式表？

【问题讨论】：

标签： angular

【解决方案1】：

好吧，您需要用引号 '' 将您的绑定括起来，因为模板引擎会在名为 route/my-stylesheet.css 的变量上查找属性 css：

<dynamic-css [myStyle]="'route/my-stylesheet.css'"></dynamic-css>

然后，您需要通过实施管道来处理攻击，以忽略Correct way Provide DomSanitizer to Component with Angular 2 RC6 的清理工作

从“@angular/core”导入 { Pipe }；导入 { DomSanitizer } 从 "@angular/平台浏览器";

@Pipe({ name: 'safe' }) 导出类 SafePipe 实现 PipeTransform {构造函数（私人消毒剂：DomSanitizer）{}变换（网址）{ 返回 this.sanitizer.bypassSecurityTrustResourceUrl(url); } }

最后，在模块中声明管道并将管道应用到你的组件上：

模块

import { SafePipe } from "./safe.pipe";
@NgModule({
  <...>
  declarations: [ App, DynamicCssComponent, SafePipe ], <...> }

组件我们将使用应用的管道直接绑定到 href

<link rel="stylesheet" [href]="myStyle | safe">

这是一个带有工作演示的 plunker：http://plnkr.co/edit/UOkl9jqulXklf48iJiuz?p=preview

【讨论】：

我之前使用过 DomSanitize，但似乎我真正的问题是属性绑定中的单引号：[myStyle]="'route/my-stylesheet.css'"。谢谢！