首页 文章

如何将组件导入Angular 2中的另一个根组件

提问于
浏览
45

我试图从一个文件导入组件另一个根组件文件 . 它给出了错误..

zone.js:484未处理的Promise拒绝:模板解析错误:'courses'不是已知元素:1 . 如果'courses'是Angular组件,则验证它是否是此模块的一部分 . 2.如果“courses”是Web组件,则将“CUSTOM_ELEMENTS_SCHEMA”添加到此组件的“@NgModule.schema”以禁止显示此消息 . (“My First Angular 2 App [ERROR - >]”):AppComponent @ 0:31;区域:;任务:Promise.then;值:错误:模板解析错误:(...)错误:模板解析错误:'courses'不是已知元素:

我的app.component.ts就像[根组件文件]

import { Component } from '@angular/core';
import {CoursesComponent} from './courses.component';

@Component({
  selector: 'my-app',
  template: '<h1>My First Angular 2 App</h1><courses></courses>',
  directives:[CoursesComponent],
})

export class AppComponent { }

和我的courses.component.ts是;

import { Component } from '@angular/core';
@Component({
  selector: 'courses',
  template: '<h1>courses</h1>'
})
export class CoursesComponent { }

从app.component中的courses.component.ts文件导入课程组件时,我无法在 @Component{} 中声明指令

directives:[CoursesComponent] 给我错误

请告知解决方案 .

4 回答

  • 32

    对于Angular RC5和RC6,您必须在模块元数据装饰器的 declarations 键中声明组件,因此在主模块 declarations 中添加 CoursesComponentbelow and remove directives from AppComponent metadata.

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    
    import { AppComponent } from './app.component';
    import { CoursesComponent } from './courses.component';
    
    @NgModule({
      imports:      [ BrowserModule ],
      declarations: [ AppComponent, CoursesComponent ],
      bootstrap:    [ AppComponent ]
    })
    export class AppModule { }
    
  • 55

    您应该使用 declarations array(meta property) of @NgModule 声明它,如下所示( RC5 and later ),

    import {CoursesComponent} from './courses.component';
    
    @NgModule({
      imports:      [ BrowserModule],
      declarations: [ AppComponent,CoursesComponent],  //<----here
      providers:    [],      
      bootstrap:    [ AppComponent ]
    })
    
  • 12

    Angular RC5 & RC6

    如果您在Jasmine测试中遇到上述错误,很可能是因为您必须在 TestBed.configureTestingModule({}) 中声明不可撤消的组件 .

    TestBed为单元测试配置和初始化环境,并提供在单元测试中模拟/创建/注入组件和服务的方法 .

    如果在执行单元测试之前未声明组件,Angular将不知道模板文件中的 <courses></courses> .

    Here is an example:

    import {async, ComponentFixture, TestBed} from "@angular/core/testing";
    import {AppComponent} from "../app.component";
    import {CoursesComponent} from './courses.component';
    
    describe('CoursesComponent', () => {
      let component: CoursesComponent;
      let fixture: ComponentFixture<CoursesComponent>;
    
      beforeEach(async(() => {
        TestBed.configureTestingModule({
          declarations: [
            AppComponent,
            CoursesComponent
          ],
          imports: [
            BrowserModule
            // If you have any other imports add them here
          ]
        })
        .compileComponents();
      }));
    
      beforeEach(() => {
        fixture = TestBed.createComponent(CoursesComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
      });
    
      it('should create', () => {
        expect(component).toBeTruthy();
      });
    });
    
  • 7

    以上答案简单来说,你必须在 @NgModule 下注册

    declarations: [
        AppComponent, YourNewComponentHere
      ]
    

    app.module.ts

    别忘了 import 那个组件 .

相关问题