Angular 6中的多时隙转换

Question

我试图在Angular 6中创建一个具有多槽插入的组件,这篇博文(适用于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 { }

通过这种方式,角度不会抱怨level-icon或level-description并且翻译将工作得很好.但是,设置此选项可能会隐藏您可能遇到的其他问题.例如,你可以在使用组件时输入错误,并且因为你告诉你有角度CUSTOM_ELEMENTS,它不会给你一个错误.您最终调试代码并想知道为什么您刚开发的全新组件无效.

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

当你写<ng-content select="level-icon"></ng-content>angular时,实际上会寻找被调用的html元素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>as元素,则必须创建子组件或使用CUSTOM_ELEMENTS_SCHEMA.