我使用的是 Angular 2 的最终发布版本。我已经设置了官方网站中提到的启动文件 angular 2 quickstart .在我的 app.component.ts 文件中,我制作了 2 个组件。代码如下所示:-
import { Component, OnInit} from '@angular/core';
@Component({
selector: 'demo',
template:`
<h2>Hi, demo !!</h2>
`
})
export class DemoComponent implements OnInit{
constructor(){}
ngOnInit(){
}
}
@Component({
selector: 'my-app',
template: `<h1>My First Angular 2 App</h1>
<demo></demo>
`
})
export class AppComponent implements OnInit{
constructor(){}
ngOnInit(){
}
}
在 my-app 的组件中,我使用了指令选择器,它是一个数组。但是编辑器(VS Code)显示错误。 chrome 的控制台抛出错误,告诉 模板解析错误: “演示”不是已知元素:
请帮我解决这个问题。谢谢
这是我的app.module.ts 文件
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
imports: [BrowserModule],
declarations: [AppComponent, DemoComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
最佳答案
您必须在 declarations
中定义您的组件模块的属性。
app.module.ts
import { AppComponent, DemoComponent } from './app.component';
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent, DemoComponent ], <== here
bootstrap: [ AppComponent ]
})
export class AppModule { }
并将其从 directives
中删除AppComponent
的属性(property).它已被弃用。
app.component.ts <罢工>罢工>
<罢工> directives: [DemoComponent] ,
罢工><罢工>罢工>
关于Angular 2指令错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39683376/