我正在关注角度转换的few良好posts以制作向导组件。我有一个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.
我知道上面的错误很清楚,但这是一个Web组件吗?
一些代码:
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
答案 0 :(得分:4)
Angular的错误消息再次非常明确且有用。 This answer指出了我正确的方向。
如果&#39;向导标题&#39;是一个Web组件,然后添加&#39; CUSTOM_ELEMENTS_SCHEMA&#39;到了&#39; @ NgModule.schemas&#39;该组件可以禁止此消息。
我不知道这一点,但那些被剔除的元素似乎是Web Components。添加
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
我的app模块似乎解决了这个问题;但是,我不知道为什么博客文章中的例子没有必要这样做。
看起来您也可以为这些suggested here创建自己的指令:
@Directive({selector: 'my-component-title, my-component-content'})
class MyComponentTags{ }
export const MY_COMPONENT_DIRECTIVES = [ MyComponent, MyComponentTags ];