angular - 如何创建无容器的 Angular 6+ 组件？

Question

我基于 Angular 7 的 Bootstrap 4 编写了一个非常简单的组件。最后的结果是:

一切都很完美，但在 Aurelia 中，我们可以创建一个无容器组件。有必要基于 Bootstrap 4 创建其他组件，这些组件不能包装到非引导 div 元素中。 ( Angular 格)

如何删除 Angular 元素的容器并在其中渲染？

Answer 1

你不能真的只是省略周围的容器，不。但是，您可以创建一个带有属性选择器的组件:

@Component({
  selector: "[appFoo]",
  template: `<ng-content></ng-content>`,
})
export class AppFooComponent {}

你可以这样使用它:

<div appFoo>Hello!</div>

这样你就可以在使用组件时决定周围的容器应该是什么。您还可以将选择器进一步限制为 div[appFoo] 等

---

注意:默认情况下，Angular CLI 项目中的 codelyzer 规则会给你一个 linting 错误，因为它要求组件使用组件选择器，但你可以在你的 tslint 配置中禁用它。