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

【问题标题】：Is there any way to only render the template/content of my Angular component?有没有办法只渲染我的 Angular 组件的模板/内容？
【发布时间】：2017-05-22 22:41:38
【问题描述】：

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

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

simple-card.component.scss

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

superior-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。我需要完全删除/替换仅显示其内容的组件“容器”。

【问题讨论】：

标签： angular itcss rscss

【解决方案1】：

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

来定位组件元素

:host {}

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

&/deep/ {}

【讨论】：

谢谢，但我没有使用封装，也没有使用styleUrls 导入它。我想让我的 scss “面向未来”，这样我就可以将它与多个框架和库一起使用，而无需进行任何更改。

【解决方案2】：

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

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

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

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

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

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

【讨论】：