0

我想要一个干净的 HTML，只有组件内容而不是容器，因为我想使用ITCSS和RSCSS方法。

所以，认为我有 2 个组件：app-simple-card和app-superior-header；我想要以下结构。

简单的card.component.scss

.simple-card {
    > .header {
        @extends .superior-header;
        @extends .superior-header.-compact;
    }
}

优越的header.component.scss

.superior-header {
    > .title {}

    &.-compact {}
}

问题

Angular 为组件内容呈现一个“容器”，迫使我使用组件名称作为选择器的一部分。这违反了 RSCSS 方法，所以我不想那样做，而且在另一个项目中重用这些样式会很糟糕。

现在，scss 文件看起来像这样：

.simple-card {
    > app-superior-header > .header {...}
}

我也不想将组件用作属性，因为它不能解决我的问题，也不是一个好习惯。我需要完全删除/替换仅显示其内容的组件“容器”。

4

2 回答 2

-1

在组件样式中，您可以使用

:host {}

如果您想在组件中定位子级，请使用

&/deep/ {}
于 2017-05-23T11:58:58.913 回答
-1

我听到您在说什么，但请务必为您的组件使用属性选择器并使用主机绑定将类添加到您正在使用的任何元素中。

Angular 风格指南不是一本你必须遵守的法律书，它只是包含指导方针。如果您的用例需要另一种实践，请使用它

@Component({
  selector: '[appSimpleCard]',
})
export class SimpleCard {
  @HostBinding('class')
  classList = 'simple-card'; // or rather 'c-simple-card'
}

像使用常规指令一样为组件使用属性选择器，您可以控制所有属性，包括使用主机绑定和主机侦听器为主机元素添加 ITCSS 组件类和事件，以及渲染模板。这正是我们想要的。

另一个好处是，您不必:host { display: block }像所有自定义元素标记通常那样添加到组件样式中。您还可以在 DOM 中为以这种方式呈现的每个组件保存一个额外的元素，这可以在一个复杂的应用程序中添加相当多的已保存元素。

这不适用于原生视图封装（shadow DOM）。

于 2018-02-02T04:17:20.757 回答