この記事は機械翻訳のミラー記事です。元の記事にジャンプするにはこちらをクリックしてください。

眺める: 9238|答える: 1

[角] Angular 9シリーズ(VII)CSSスタイルのスコープ

[リンクをコピー]
掲載地 2020/06/17 16:46:59 | | | |
Angular 9シリーズ(1)動的負荷成分
https://www.itsvse.com/thread-9238-1-1.html

Angular 9系列(2)動的成分伝送パラメータ
https://www.itsvse.com/thread-9245-1-1.html

Angular 9シリーズ(3)は動的コンポーネントイベントをサブスクライブします
https://www.itsvse.com/thread-9246-1-1.html

Angular 9シリーズ(IV)カスタムパイプパイプライン
https://www.itsvse.com/thread-9248-1-1.html

Angular 9シリーズ(V)は金額通貨形式をフォーマットします
https://www.itsvse.com/thread-9249-1-1.html

Angular 9シリーズ(VI)はネイティブのJS変数とメソッドを呼び出します
https://www.itsvse.com/thread-9254-1-1.html
振り返ってみると、導入されたサードパーティコンポーネントのスタイルを修正しようとしましたが、成功しませんでした。

Angular settingコンポーネントのCSSスタイルは影響しません。解決策
https://www.itsvse.com/thread-9184-1-1.html
:hostは現在のコンポーネントを選択するセレクタを表します。
::ng-deep は中間クラスNameの入れ子された階層関係を無視できます。 修正したいクラス名を直接見つけてください。
しかし、公式ドキュメントによると、ng-deepは今後のバージョンで廃止される予定であり、今後どのような構文になるかは不明です。

コンポーネントの上のプロパティをstyleUrlsに設定すると、現在のコンポーネントのcssスタイルシートを設定できます。

導入されたスタイルシートは現在のタグ要素のみに影響を与え、他のコンポーネントには影響しません。これはAngularフレームワークの重要な特徴です。


CSSコード:

以下のようにブラウザを通じて生成された最終的なCSSスタイルを見てみましょう。



.itsvse1[_ngcontent-serverApp-c228] {
    背景色:アズール;
}

[_nghost-serverApp-c228] .itsvse2 {
    背景色:緑;
}

[_nghost-serverApp-c228] .itsvse3 {
    背景色:赤;
}

  .itsvse4 {
    背景色:アクア;
}
.itsvse1は現在のコンポーネントのみをスタイル化し、.itsvse2と.itsvse3は導入された子コンポーネントのスタイルに影響を与え、.itsvse3はグローバルスタイルに影響を与えます。

ITSVSE1 CSSは現在のコンポーネントにのみ影響を与えられます。なぜなら、すべての現在のノード要素に「_ngcontent-serverapp-c228」属性が追加されるからです。下図に示されています。



(終わり)




先の:第17回Marco Linuxアドバンスドクラウドコンピューティング運用ワークショップのビデオリンクをご覧ください
次に:SQL文における「!=」と「<>」の違い
 地主| 掲載地 2021/11/26 17:07:00 |
免責事項:
Code Farmer Networkが発行するすべてのソフトウェア、プログラミング資料、記事は学習および研究目的のみを目的としています。 上記の内容は商業的または違法な目的で使用されてはならず、そうでなければ利用者はすべての結果を負うことになります。 このサイトの情報はインターネットからのものであり、著作権紛争はこのサイトとは関係ありません。 ダウンロード後24時間以内に上記の内容を完全にパソコンから削除してください。 もしこのプログラムを気に入ったら、正規のソフトウェアを支持し、登録を購入し、より良い本物のサービスを受けてください。 もし侵害があれば、メールでご連絡ください。

Mail To:help@itsvse.com