Angular 5自定義組件CSS

Question

我有一個CSS文件，僅在頁面上有組件時才要加載。

我嘗試了以下方法：

@Component({
  selector: 'testview-testview',
    templateUrl: './templates/testview.html',
    styles: [
        "../../../assets/vendors/custom/reveal.js-3.6.0/css/reveal.css",
        "../../../assets/vendors/custom/reveal.js-3.6.0/css/theme/black.css"
    ],
})

但是沒有任何運氣。 有人知道這樣做的方法嗎？

編輯

所以我試圖按照下面的答案

這是我的文件夾結構：

我的組件現在看起來像這樣：

import {Component, OnInit} from '@angular/core';

declare var Reveal: any;

@Component({
    selector: 'testview-testview',
    templateUrl: './templates/testview.html',
    styleUrls: ['./templates/testview.css'],
})
export class TestviewComponent implements OnInit {

    constructor() {
    }


    ngOnInit() {
        Reveal.initialize({});
    }

}

我的testview.css文件看起來像這樣：

    @import url("../../../assets/vendors/custom/reveal.js-3.6.0/css/reveal.css");
@import url("../../../assets/vendors/custom/reveal.js-3.6.0/css/theme/black.css");

Answer 1

您必須在styles筆數組中的網址內部： styleUrls 而不是 styles

所以

@Component({
  selector: 'testview-testview',
    templateUrl: './templates/testview.html',
    styleUrls: [
        "../../../assets/vendors/custom/reveal.js-3.6.0/css/reveal.css",
        "../../../assets/vendors/custom/reveal.js-3.6.0/css/theme/black.css"
    ],
})

編輯：

@Component({
  selector: 'testview-testview',
    templateUrl: './templates/testview.html',
    styleUrls: ['./templates/testview.css'

    ],
})

在您的CSS ./templates/testview.css導入文件中

@import url("../../../assets/vendors/custom/reveal.js-3.6.0/css/reveal.css");
@import url("../../../assets/vendors/custom/reveal.js-3.6.0/css/theme/black.css");