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 {...}
}

我也不想使用component as an attribute，因为它无法解决我的问题and it's not considered a good practice。我需要完全删除/替换组件“容器”，只显示它的内容。

Answer 1

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

定位组件元素

:host {}

如果您想在组件中使用目标

&/deep/ {}

Answer 2

我听到你在说什么，但是你的组件使用属性选择器，主机绑定将类添加到你正在使用的元素中。

“角度风格指南”不是您必须遵守的法律书籍，它只包含指南。如果您的用例需要其他练习，请使用它

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

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

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

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

有没有办法只渲染我的Angular组件的模板/内容？

问题

2 个答案: