今回は、コンポーネントタグにスタイルを追加する方法と、コンポーネントタグにスタイルを追加する際の注意点を紹介します。以下は実際のケースです。
方法 1: @Component
@Component({
selector : 'myComponent',
host : {
'[style.color]' : "'red'",
'[style.background-color]' : 'backgroundColor'
}
})
class MyComponent {
backgroundColor: string;
constructor() {
this.backgroundColor = 'blue';
}
}のホスト属性を使用して、ホスト構成に属性を追加します。これは、ラベルのバインド属性の使用と同等です。
スタイルの設定:
'[style.color]': "'red'": red 値の二重引用符の中に単一引用符があることに注意してください。
'[style.background-color]':'backgroundColor': これはコンポーネント内の変数backgroundColorを参照します。
この方法の利点は、スタイルでコンポーネント変数を使用できることです。
クラス:
@Component({
selector : 'myComponent',
host : {
'[class.myclass]' : 'showMyClass'
}
})
class MyComponent {
showMyClass = false;
constructor() {
}
toggleMyClass() {
this.showMyClass = !this.showMyClass;
}
}を設定する
@Component({
selector : 'myComponent',
styles : [`
:host {
color: red;
background-color: blue;
}
`]
})
class MyComponent {}方法 2: スタイルでホストセレクターを使用する
rrreee
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い内容については、他の関連記事に注目してください。 PHP中国語ウェブサイトで！ Vue+Nuxt.js でサーバーサイドレンダリングを行う Number の最大要素と最小要素を取得する🎜🎜🎜以上がコンポーネントタグにスタイルを追加するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
