angular - 我们可以控制 ViewEncapsulation.None 影响 Angular 应用程序中的其他组件吗？

Question

@Component({
...
...
...
encapsulations: ViewEncapsulation.None
})

当我使用 封装就像它与应用程序中其他组件中的默认样式冲突。

Answer 1

当您使用 ViewEncapsulation.None 加载组件时，其样式将应用于所有应用程序。

所以答案是否定的，你不能...

但是 ，您可以做的是在您的组件样式文件中编写独特的 css 样式，例如:

<app-toolbar></app-toolbar>

在您的工具栏 html 中，您有类似的内容:

<span>hello</span>
<div>My name is</div>

将样式仅应用于此组件写入其样式文件:

app-toolbar span{
  color: green;
}

app-toolbar div{
  color: red;
}

如果您使用 scss 文件甚至更好:

app-toolbar {
  span {
    color: green;
  }
  div {
    color: red;
  }
}

编辑:

你还可以做什么，这肯定有效(经过测试):

<app-toolbar></app-toolbar>

在这个组件 html 文件中(将其所有内容包装在一个 div 中):

<div class="my-toolbar">
  <span>hello</span>
  <div>My name is</div>
</div>

然后在它的样式文件中:

.my-toolbar span{
  color: green;
}

.my-toolbar div{
  color: red;
}

或以 scss 格式:

.my-toolbar {
  span {
    color: green;
  }
  div {
    color: red;
  }
}