Angular 包含：X 不是已知元素

Question

我正在关注 few good posts 关于 angular 嵌入以制作向导组件。我有一个 Wizard 组件，它采用 WizardStep 组件。我遇到的问题是我的向导模板 (wizard-title) 中要嵌入的元素是：

Unhandled Promise rejection: Template parse errors:
'wizard-title' is not a known element:
1. If 'wizard-title' is an Angular component, then verify that it is part of this module.
2. If 'wizard-title' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

我知道上面的错误很清楚，但这是一个网络组件吗？

一些代码：

`wizard.component.html`

（包装元素，选择器：reg-wizard）：

<md-card>
  <md-card-header>
    <ng-content select="wizard-title"></ng-content> 
  </md-card-header>
  <md-card-content>
    <ng-content select="reg-wizard-step"></ng-content> <!-- STEPS, corresponds to another component -->
  </md-card-content>
</md-card>

`wizard-step.component.html`

（重复元素，选择器：reg-wizard-step）：

<md-card>
  <md-card-header>
    <ng-content select="wizard-step-header"></ng-content>
  </md-card-header>
  <md-card-content>
    <ng-content select="wizard-step-content"></ng-content>
  </md-card-content>
</md-card>

测试实现（在`app.component.html`）：

<reg-wizard>
  <wizard-title>Title</wizard-title>

  <reg-wizard-step>
    <wizard-step-header>Step 1</wizard-step-header>
    <wizard-step-content>
      <p>some paragraph in step 1</p>
      <button md-raised-button>next</button>
    </wizard-step-content>
  </reg-wizard-step>

  <reg-wizard-step>
    <wizard-step-header>Step 2</wizard-step-header>
    <wizard-step-content>
      <p>some paragraph in step 2</p>
      <button md-raised-button>finish</button>
    </wizard-step-content>
  </reg-wizard-step>
</reg-wizard>

预期输出：

<md-card>
  <md-card-header>
    Title
  </md-card-header>
  <md-card-content>

    <md-card>
      <md-card-header>
        Step 1
      </md-card-header>
      <md-card-content>
        <p>some paragraph in step 1</p>
        <button md-raised-button>next</button>
      </md-card-content>
    </md-card>

    <!--some functions / css will hide step 2 until it is needed...-->
    <md-card>
      <md-card-header>
        Step 2
      </md-card-header>
      <md-card-content>
        <p>some paragraph in step 1</p>
        <button md-raised-button>next</button>
      </md-card-content>
    </md-card>

  </md-card-content>
</md-card>

我的版本：

@angular/cli: 1.0.0
node: 7.7.3
os: darwin x64
@angular/animations: 4.1.0
@angular/common: 4.1.0
@angular/compiler: 4.1.0
@angular/core: 4.1.0
@angular/forms: 4.1.0
@angular/http: 4.1.0
@angular/material: 2.0.0-beta.3
@angular/platform-browser: 4.1.0
@angular/platform-browser-dynamic: 4.1.0
@angular/router: 4.1.0
@angular/cli: 1.0.0
@angular/compiler-cli: 4.1.0

Answer 1

再一次，Angular 的错误消息在这里非常清楚和有用。为我指明了正确的方向。

If 'wizard-title' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

我不知道，但那些嵌入的元素似乎是 Web Components。添加

schemas: [ CUSTOM_ELEMENTS_SCHEMA ]

我的应用模块似乎已经解决了这个问题；但是，我不知道为什么博客中的示例 post 不必有这个。

看起来您也可以为这些 suggested here:

创建自己的指令

@Directive({selector: 'my-component-title, my-component-content'})
class MyComponentTags{ }

export const MY_COMPONENT_DIRECTIVES = [ MyComponent, MyComponentTags ];

Angular 包含：X 不是已知元素

Angular Transclusion: X is not a known element

transclusion

angular

`wizard.component.html`

`wizard-step.component.html`

测试实现（在`app.component.html`）：

预期输出：

Angular 包含：X 不是已知元素

Angular Transclusion: X is not a known element

transclusion

angular

wizard.component.html

wizard-step.component.html

测试实现（在app.component.html）：

预期输出：

`wizard.component.html`

`wizard-step.component.html`

测试实现（在`app.component.html`）：