Question

我遇到了一个小问题，我定义了这样的组件：

@Component({
    selector: 'documents',
    styleUrls: ['./documents.scss', '../../../../node_modules/primeng/resources/primeng.min.css', '../../../../node_modules/primeng/resources/themes/omega/theme.css', '../../../../node_modules/font-awesome/css/font-awesome.min.css'],
    templateUrl: './documents.html',
    encapsulation: ViewEncapsulation.None,
    providers:[

    ],
})

在我的css文件中，我有时会为类等名称。

//CSS 1 
.boxHeader {
  position: absolute
  background-color: red;
}
//CSS 2
.boxHeader {
  background-color: blue;
}

因此，如果我直接打开组件，其工作方式与例外情况一样，只会加载css1或css2。问题是如果用户在它们之间导航，angular会保留前一个的css文件。如果我从1导航到2，结果如下：

//CSS 2
.boxHeader {
  position: absolute; //This one gets inserted from CSS1
  background-color: blue; //This one gets overwritten
}

有没有办法告诉ngOnDestroy()删除所有样式引用？

编辑这样我绑定了它：

"styles": [
        "../node_modules/roboto-fontface/css/roboto/sass/roboto-fontface.scss",
        "../node_modules/normalize.css/normalize.css",
        "../node_modules/font-awesome/scss/font-awesome.scss",
        "../node_modules/ionicons/scss/ionicons.scss",
        "../node_modules/bootstrap/scss/bootstrap.scss",
        "../node_modules/leaflet/dist/leaflet.css",
        "../node_modules/chartist/dist/chartist.css",
        "../node_modules/fullcalendar/dist/fullcalendar.css",
        "../node_modules/handsontable/dist/handsontable.full.css",
        "../node_modules/ng2-slim-loading-bar/style.css",
        "../node_modules/primeng/resources/primeng.min.css", //new
        "../node_modules/primeng/resources/themes/omega/theme.css", //new
        "app/theme/theme.scss",
        "styles.scss"
      ],

评论不在里面，它现在返回的这个小错误：

Error: Expected 'styles' to be an array of strings.

Answer 1

不要在你的styleUrls中插入你的css链接，它应该只包含那些特定组件的css。从您的代码中，它应该只包含documents.scss。

对于你的primeng和font awesome样式，将它插入index.html或者你可以将它插入你的angular-cli.json

即

 "styles": [
     "styles.css",
    "../node_modules/primeng/resources/primeng.min.css", 
    "../node_modules/primeng/resources/themes/omega/theme.css", 
    "../node_modules/font-awesome/css/font-awesome.min.css"
      ],

此外，删除ViewEncapsulation.None，因为它会将你的css泄露给其他组件，除非这是你想要的。

更新1

如果您收到此错误

Error: Expected 'styles' to be an array of strings.

错误是您定义styleUrl的方式。试试这个

styleUrls: ['./documents.scss']

而不只是一个字符串。

Angular 2将样式从一个组件保留到下一个组件

1 个答案: