Angular 6 中的多槽嵌入

Question

我正在尝试在 Angular 6 中创建一个具有多槽嵌入的组件，遵循 this blog post（适用于 Angular 2）。

我创建了一个组件：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-criteria',
  template: `
    <div class="adoption-grid-column adopter">
      <div class="adoption-grid-icon ">
        <ng-content select="level-icon"></ng-content>
      </div>

      <div class="adoption-grid-body">
        <ng-content select="level-description"></ng-content>
      </div>
    </div>
  `,
  styles: []
})
export class CriteriaComponent implements OnInit {
  constructor() {}

  ngOnInit() {}
}

然后我尝试像这样使用它

<app-criteria>
    <level-icon>
        foo
    </level-icon>
    <level-description>
        bar
    </level-description>
</app-criteria>

但它会引发编译错误：

ERROR in : 'level-icon' is not a known element

我在这里错过了什么？

我意识到我可以在这里创建子组件，但我正在寻找一种解决方案，我可以将 html 块传递到我的组件中的插槽（例如项目符号列表、图像等）

Answer 1

如您所述，最简单的解决方案（我更喜欢的解决方案）是使用ng-content 创建子组件。如果你不想创建这样的组件，你可以做两件事。

1. CUSTOM_ELEMENTS_SCHEMA

您可以通过将 CUSTOM_ELEMENTS_SCHEMA 添加到功能模块的 schema 数组中来告诉 Angular 跳过它无法识别的组件。

例如

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
    imports: [...]
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class CustomModule { }

通过这种方式，angular 不会抱怨level-icon 或level-description 并且嵌入会正常工作。但是，设置此选项可能会隐藏您可能遇到的其他问题。例如，您可以在使用组件时打错字，并且由于您告诉 Angular 您将拥有CUSTOM_ELEMENTS，因此它不会给您错误。您最终调试了您的代码，并想知道为什么您刚刚开发的全新组件无法正常工作。

1. 选择元素以外的类或属性。

当您编写<ng-content select="level-icon"></ng-content> 时，angular 会实际查找名为level-icon 的html 元素。你可以让它搜索类、属性等。所以你可以做的是改变这个

<ng-content select="level-icon"></ng-content>

到

<ng-content select="[level-icon]"></ng-content>

或

<ng-content select=".level-icon"></ng-content>

并按如下方式使用您的组件

<app-criteria>
    <div level-icon>
        foo
    </div>
</app-criteria>

或

<app-criteria>
    <div class="level-icon">
        foo
    </div>
</app-criteria>

通过这种方式，您可以select 为ul 或img。基本上任何你想要的。

如果你仍然想使用<level-icon>作为元素，你要么必须创建一个子组件，要么使用CUSTOM_ELEMENTS_SCHEMA。

Answer 2

你也可以使用ngProjectAs

<div ngProjectAs="level-icon">...</div>
<div ngProjectAs="level-description">...</div>

在这种情况下，您不需要禁用标签验证