Question

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

<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传递给组件，或者以其他方式动态设置样式表？

Answer 1

嗯，你需要在引号中包围你的绑定＆＃39;＆＃39;因为模板引擎正在使用css的名称在变量上查找属性route/my-stylesheet.css：

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

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

从＆＃34; @ angular / core＆＃34;中导入{Pipe};从{导入{DomSanitizer}   ＆＃34; @角/平台的浏览器＆＃34 ;;

@Pipe（{name：＆＃39; safe＆＃39;}）导出类SafePipe实现PipeTransform   {constructor（private sanitizer：DomSanitizer）{} transform（url）{       return 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

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

1 个答案: