时间戳

首页 > 解决方案 > Angular 6 中的多槽嵌入

javascript - Angular 6 中的多槽嵌入

问题描述

我正在尝试按照这篇博文（适用于 Angular 2）在 Angular 6 中创建一个具有多槽嵌入的组件。

我创建了一个组件：

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 块传递到组件中的插槽（例如项目符号列表、图像等）

标签： javascriptangular

解决方案

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

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

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

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

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

推荐阅读