スタイルの変更::ホスト:: ng-deep

Style Modification

一部のサードパーティコンポーネントを使用する場合は、コンポーネントのスタイルを変更する必要があります。
この場合を使用します：

:host ::ng-deep .className{ New style... }

このようにして、スタイルを簡単に変更できます。

たとえば、リーダーはnz-timelineコンポーネントの垂直距離が大きいと考えており、インターフェイス全体がコンパクトであることを望んでいます。このようなCSSコードを、このコンポーネントを使用するコンポーネントに導入できます。

/ / Modify the spacing between ant-timeline-item :host ::ng-deep .ant-timeline-item{ padding: 0 0 8px } //Modify the spacing between the last item and the bottom. :host ::ng-deep .ant-timeline-item-last .ant-timeline-item-content{ min-height: 10px /* margin-bottom: -30px */ }

このように、インターフェース全体がはるかに短く、より細かくなります。
：hostはセレクターを表し、現在のコンポーネントを選択します。
:: ng-deepは、中間クラス名のネスト階層を無視できます。直接変更するclassNameを見つけます。
ただし、公式文書には、ng-deepは将来のバージョンで廃止されると記載されており、将来どのような文法になるかはわかりません。これを使用するときは、将来のAngularアップグレードによってもたらされる変更に備えることを忘れないでください。