有什么方法只能渲染我的Angular组件的模板/内容吗？

Question

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

因此，以为我有两个组成部分： 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 {...}
}

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

Answer 1

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

:host {}

如果要针对组件使用中的子对象

&/deep/ {}

Answer 2

我听到您在说什么，但是请为组件使用属性选择器和主机绑定，以将类添加到所使用的任何元素。

Angular Style Guide不是您必须遵守的法律手册，它仅包含准则。 如果您的用例需要其他实践，请使用它

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

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

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

这不适用于本机视图封装（阴影DOM）。