Angular のスタイルの分離実装メカニズムについて話しましょう

Angularスタイル分離はどのように機能しますか?この記事では、Angular のスタイル分離の実装メカニズムについて説明します。

#angular はコンポーネントを基本単位とします。コンポーネントを 1 つずつ記述し、これらのコンポーネントをコンポーネント ツリーに結合します。ただし、開発プロセス中に、親コンポーネント内の子コンポーネントのスタイルをオーバーライドすることが必要になることがよくあります。たとえば、親コンポーネントと子コンポーネントがあり、子コンポーネントにはスパンがあり、スパンのフォントは赤です。 [関連チュートリアルの推奨事項:「

angular チュートリアル」]

以下に示すように:

//child.componet.html
<span class="child-span">child span</span>
//child.component.scss
.child-span {
  color: red;
}

今の場合、親コンポーネントは子コンポーネントのspanのコンテンツを緑色にしたいと考えています。次のメソッドを使用できます。

//parent.component.scss
app-child {
  ::ng-deep {
    .child-span {
      color: green;
    }
  }
}

親コンポーネントで、angular によって提供される

::ng-deep キーワードを使用してスタイルをオーバーライドします。

次に、子コンポーネントのコンテンツを変更し、スパンの外側に div のレイヤーを追加しましょう。結局のところ、実際のコンポーネントは 1 つのレイヤーほど単純ではありません。

//child.componet.html
<div class="child-div">
  <span class="child-span">child span</span>
</div>
//child.component.scss
.child-div {
  .child-span {
    color: red;
  }
}

この時点で、子コンポーネントのspanの内容が赤色に戻っており、親コンポーネントによる以前の上書きが有効になっていないことがわかります。

::ng-deep なぜ失敗するのでしょうか?言い換えれば、::ng-deep はいつ有効になるのでしょうか?有効期限はいつですか?さらに、Angular のコンポーネントとコンポーネント間のスタイルの分離はどのように実現されるのでしょうか?

css セレクター

css は、要素セレクター、ID セレクター、クラス セレクター、および

属性セレクター を提供します。

Angular でのスタイル分離の問題については、より重要なのは

属性セレクターです。 属性セレクターでは、要素に属性を追加することで要素を正確に選択できます。 たとえば、

a[target] {
    background-color:yellow;
}

上記のセレクターを使用して、ターゲット属性を持つすべての要素を選択できます。

もう 1 つは

子孫セレクター です。

CSS では、子孫セレクターは、指定された要素のすべての子孫要素を選択します。 たとえば、

[attr] span {
    color: green;
}

このセレクターは、最初に attr 属性を持つ要素を選択し、次にこの要素のすべての子孫のspan要素を選択します。

css 属性セレクター と 子孫セレクター を使用すると、コンポーネント スタイルの分離を完了するために必要なツールがすべて揃います。 Angular のコンポーネントのスタイル分離と ::ng-deep は、これら 2 つの内容に完全に基づいています。

angular スタイル分離実装メカニズム

ここで、前の angular コンポーネントに戻ります。 子コンポーネントのコンテンツは

//child.componet.html
<span class="child-span">child span</span>
//child.component.scss
.child-span {
  color: red;
}

です。親コンポーネントのコンテンツは

//parent.component.html
<app-child></app-child>

です。上記 2 つのコンポーネントが angular によって処理されると、生成される HTML コンテンツは次のようになります

ご覧のとおり、親コンポーネントにはさらに 2 つの属性

_ngcontent-mye-c13 と _nghost-mye-c12 があり、子コンポーネントにはさらに 2 つの属性があります。コンポーネントにはさらに _ngcontent が含まれています。mye-c12 と _nghost-mye-c11 の 2 つの属性が、子コンポーネントの下の spam タグに追加されます。 属性が追加されます。 scss ファイルの場合、angular 処理の後、子コンポーネントの

.child-span

クラスは .child-span[_nghost-mye-c11] になります。

これらの内容を通じて、angular のスタイル分離が属性セレクターを使用して完了していることがわかります。

_nghost-mye-c11

この属性は、子コンポーネントにのみ表示されます。 child.component.scss の .child-span クラスは、前述の属性セレクターのメカニズムに従って .child-span[_nghost-mye-c11] になります .child-span は、子コンポーネントのコンテンツにのみ有効です。 親コンポーネント内に

.child-span

クラス セレクターも記述する場合、生成されるクラス セレクターは .child-span[_nghost-mye-c12 ]## になります。 ＃。 _nghost-mye-c12 属性は親コンポーネントに属しているため、この .child-span クラスは親コンポーネントのコンテンツにのみ有効です。子コンポーネントには影響せず、スタイルの分離が完了します。 ::ng-deep

では、なぜ ::ng-deep

を使用して、子コンポーネントのコンテンツを親コンポーネントで上書きできるのでしょうか。成分？ ？

//parent.component.scss
app-child {
  ::ng-deep {
    .child-span {
      color: green;
    }
  }
}

上面的内容通过angular 处理以后，生成的内容为app-child[_nghost-mye-c12] .child_span。位于::ng-deep 后面的类，去掉了自动添加的属性，这时候根据css 的后代选择器机制。app-child[_nghost-mye-c12] .child_span会选中child 组件下面的所有带有.child_span 类的标签，而且根据优先级计算，app-child[_nghost-mye-c12] .child_span 高于child 组件生成的.child_span[_nghost-mye-c11] ，于是child 组件中的样式就被覆盖掉了。

那为什么有时候::ng-deep不能够覆盖掉呢？比如，当child 组件代码如下的时候

//child.componet.html
<div class="child-div">
  <span class="child-span">child span</span>
</div>
//child.component.scss
.child-div {
  .child-span {
    color: red;
  }
}

这时候即使我们发现child 组件中span 的颜色依旧是红色。

实际上原因也不复杂，检查angular 生成的样式文件后，我们可以发现，之所以没有把覆盖掉，纯粹是因为css 选择器优先级的问题。child 组件生成的样式.child-div[_nghost-mye-c11] .child-span[_nghost-mye-c11] 优先级高于parent 组件生成的样式app-child[_nghost-mye-c12] .child。于是，我们看到的效果就是parent 组件中的::ng-deep 没有生效，一种比较快捷的做法是直接在parent 组件的样式后面加上!important。但是由于!important 权重太高的原因，并不是很推荐。歪个楼，在发现angular ::ng-deep 失效的原因之前，很遗憾，项目之前很多地方的都有这种用法。

另一个方法就是，既然是因为优先级不够，那么提高parent 组件生成的样式的优先级就可以了。 修改parent 组件的代码为

:host {
  app-child {
    ::ng-deep {
      .child-div {
        .child-span {
          color: green;
        }
      }
    }
  }
}

这时候，parent 组件生成的样式[_nghost-mye-c12] app-child[_nghost-mye-c12] .child-div .child-span 优先级高于child 组件生成的样式.child-div[_nghost-mye-c11] .child-span[_nghost-mye-c11] ，child 组件中span 的颜色也就变绿了。

这里我们使用了:host 关键字，接下来，我们简单看看它的作用。

:host

上个小结中，parent 组件生成的样式是[_nghost-mye-c12] app-child[_nghost-mye-c12] .child-div .child-span，如果去掉:host，就会发现，生成的样式变成了app-child[_nghost-mye-c12] .child-div .child-span。所以:host 关键字只是给生成的样式，加上了parent 组件属性字段而已。

那这个:host有什么用呢？

常见的作用有两个。

一个就是选择当前的组件标签，在angular 中，我们自定义的组件，比如这里的parent 组件app-parent 和child 组件app-child 最后都是会渲染到生成的html 文档上的。如果需要选中这些标签，就可以使用:host 关键字。

另一个作用还是隔离样式，将class 类写在:host 内部，这个类无论如何也是不可能泄漏到全局去的。实际上，通过前面的内容分析可以发现，不写在:host 里面，也不会泄漏到全局。但是如果出现了以下的情况

//some.component.scss
::ng-deep {
    .random-class {
        xxxx
    }
}

这个类经过angular 处理以后，最后会变为

.random-class {
    xxxx
}

random-class 将会对全局造成影响。

但是如果把它包裹在:host 内部，哪怕使用了::ng-deep 关键字，最多也只会影响到这个组件的后代元素。 所以在angular 官方文档中有下面的一段话。

Applying the ::ng-deep pseudo-class to any CSS rule completely disables view-encapsulation for that rule. Any style with ::ng-deep applied becomes a global style. In order to scope the specified style to the current component and all its descendants, be sure to include the :host selector before ::ng-deep. If the ::ng-deep combinator is used without the :host pseudo-class selector, the style can bleed into other components.

总结

我们首先介绍了css 的属性选择器和后代选择器。通过分析angular 生成的html 和css 代码，发现angular 的样式隔离功能，完全是基于这两个内容实现的。接下来，分析了::ng-deep 有时候生效，有时候有不生效的原因。最后介绍了使用:host 关键字来完全避免样式泄漏到全局。

更多编程相关知识，请访问：编程视频！！

以上がAngular のスタイルの分離実装メカニズムについて話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。