Angularjsのdom htmlにCSSファイルを追加する2

Question

私は、cssファイルを格納する変数をコンポーネントファイルに持っています。

var x = '.someClass { background: pink; } .someClass1 { background: purple; }' 

これをDOMにスタイルタグで貼り付けるにはどうすればよいですか。

私はこれを試しました。

'.someClass { background: pink; } .someClass1 { background: purple; }' 

それは無効になります。

this.globalStyles= this.sanitized.bypassSecurityTrustStyle(x); 

<style [style]='globalStyles'></style> 

Answer 1

あなたは本当にこの行を適用することはできません。ここでは、クラスを定義しようとしていますが、CSSのように見えます。

だけで、基本的なJSの構文を使用します。

document.getElementById('id').setAttribute('style', 'background: pink; background: purple'); 

角度はそれを理解する（しかし、私はあなたが二回backgroundプロパティを適用したいん理由は考えて、持っていません）。

そして、あなたのコンポーネントで：

import {Component, AfterViewInit} from '@angular/core'; 
... 
export class YourComponent implements AfterViewInit { 
    ngAfterViewInit() { 
    document.getElementById('id').setAttribute('style', 'background: pink; background: purple'); 
    } 
} 

Answer 2

まず、次の2つの異なる概念を混合していることを何卒ご了承下さい。スタイルとクラスは同じではありません。あなたの場合：

var x = '.someClass { background: pink; } .someClass1 { background: purple; }' 

ここで、xは2つのクラスの定義を含んでいます。私の経験によれば、これらのクラスは、.cssまたは.scssまたは.lessファイルの内部に宣言する必要があります。たとえば、your_component_name.scssファイル内に、このx変数の代わりにクラスが含まれます。

<some-element [ngClass]="'someClass someClass1'"></some-element> 

詳細情報についてはdocsをお読みください。

した後、あなたができ、使用このようなあなたのhtmlタグでこれらのクラスになります。それが役に立てば幸い！！