在 Angular 2 中使用嵌套组件
Using nested components in Angular 2
我有一个模块,其中声明了几个组件,当我在模板中使用指令语法时,Angular 找不到组件 - 我收到此错误
'test-cell-map' is not a known element:
1. If 'test-cell-map' is an Angular component,
then verify that it is part of this module.
2. If 'test-cell-map' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA"
to the '@NgModule.schema' of this component to suppress this message.
这里是组件模块
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { TestCellMapComponent } from './test-cell-map/test-cell-map.component';
@NgModule({
declarations: [
AppComponent,
TestCellMapComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
这是顶级组件的样子
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app works!';
}
及其关联模板
<h1>
{{title}}
<test-cell-map></test-cell-map>
</h1>
TestCellMapComponent selector
有问题
<h1>
{{title}}
<app-test-cell-map></app-test-cell-map> //<<<<===== changed
</h1>
我有一个模块,其中声明了几个组件,当我在模板中使用指令语法时,Angular 找不到组件 - 我收到此错误
'test-cell-map' is not a known element:
1. If 'test-cell-map' is an Angular component,
then verify that it is part of this module.
2. If 'test-cell-map' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA"
to the '@NgModule.schema' of this component to suppress this message.
这里是组件模块
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { TestCellMapComponent } from './test-cell-map/test-cell-map.component';
@NgModule({
declarations: [
AppComponent,
TestCellMapComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
这是顶级组件的样子
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app works!';
}
及其关联模板
<h1>
{{title}}
<test-cell-map></test-cell-map>
</h1>
TestCellMapComponent selector
有问题<h1>
{{title}}
<app-test-cell-map></app-test-cell-map> //<<<<===== changed
</h1>