Angular 2 调试器说一个元素是未知的；在 .component.ts 文件中

Question

我已经提到了这个似乎最接近的网站：Angular2 RC6: '<component> is not a known element'，但它没有帮助。我尝试修改@NgModule.imports。

Chrome 中的调试器是这样说的：

Unhandled Promise rejection: Template parse errors:
'item' is not a known element:
1. If 'item' is an Angular component, then verify that it is part of this module.
2. If 'item' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("
    [ERROR ->]<item status="false" *ngIf="isShow==false"></item>
    <item status="true" *ngIf="isShow==true"><"): ViewchildComponent@1:8

这些item 和item-component 在viewchild.component.ts 中声明。

这是app.module.ts；在参考了上面的网站后，我在@NgModule.imports中导入了ViewchildComponent。

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 { ViewchildComponent } from './viewchild/viewchild.component';

@NgModule({
declarations: [
    AppComponent
    // ViewchildComponent //<<-- I made this a comment
],
imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    ViewchildComponent //<<-- I added this
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

这是viewchild.component.ts。

import {AfterViewInit, Component, Directive, Input, ViewChild} from '@angular/core';

@Directive({ selector: 'item'})
export class Item{
    @Input() status: boolean;}

@Component({
    selector: 'item-component',
    template: '<button>알림창</button>'})
export class ItemComponent{
    display(){
        alert('ItemComponent입니다');}}

@Component({
    selector: 'app-view-child',
    template: `
        <item status="false" *ngIf="isShow==false"></item>
        <item status="true" *ngIf="isShow==true"></item>
        <button (click)="toggle()">선택</button><br>
        isShow : {{isShow}}<br>
        status : {{status}}<br>
        <item-component (click)="display()"></item-component>`})
export class ViewchildComponent {
    @ViewChild(Item)
    set item(v: Item){
        setTimeout(() => {this.status = v.status;}, 0);}

    @ViewChild(ItemComponent) itemComponent: ItemComponent;
    isShow: boolean = true;
    status: boolean;

    toggle() {
        this.isShow = !this.isShow;}

    display(){
        this.itemComponent.display();}}

index.html 有<app-root></app-root>，而这个组件只有<app-view-child></app-view-child>。我认为<app-view-child> 的模板已正确加载，但找不到指令item 和组件item-component。

这里有什么我想念的吗？如果需要更多代码，请发表评论。

Answer 1

如果您没有任何其他模块，则必须在根模块中声明所有组件和指令。这意味着您不仅要声明 ViewchildComponent，还要声明 Item 和 ItemComponent。像这样：

... // Others Imports
import { ViewchildComponent, Item, ItemComponent } from './viewchild/viewchild.component';

@NgModule({
  declarations: [
    ... // Other Declarations
    ViewchildComponent, //<<-- Uncomment this
    Item,
    ItemComponent
 ],
 imports: [
   ... // Other Module Imports
   // ViewchildComponent // Don't import components or directive here. Only imports modules here.
 ],
 ...
})
export class AppModule { }