在Angular 2中的组件上设置样式表href dynamicaly

我已经构建了一个组件，并且我想让它更加可重用，所以我可以在更多的项目中使用它。我想通过一个样式表的参考，当我在模板上创建组件，这样的事情：在Angular 2中的组件上设置样式表href dynamicaly

<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到组件，或其他方式来设置样式表动态？

来源

2016-11-14 Miguel

那么，你需要环绕你绑定在引号“”，因为模板引擎是由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};从 “@ angular/platform-browser”导入{DomSanitizer};

@Pipe（{名称： '安全'}）出口类SafePipe实现PipeTransform {构造函数（私人消毒剂：DomSanitizer）{}变换（URL）{ 回报this.sanitizer.bypassSecurityTrustResourceUrl（URL）; }}

最后，声明管模块和应用的组件上的管：

模块

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

组件我们将直接绑定的应用HREF管

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

这里是一个工作演示的沉睡者：http://plnkr.co/edit/UOkl9jqulXklf48iJiuz?p=preview

来源

2016-11-14 16:53:01 silentsod

我以前曾经在DomSanitize的周围工作过，但似乎我真正的问题是属性绑定中的单引号：[myStyle] =“'route/my-stylesheet。 CSS'”。谢谢！ – Miguel

在Angular 2中的组件上设置样式表href dynamicaly

回答

相关问题