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

Posted 2023-02-22

【中文标题】如何将组件导入Angular 2中的另一个根组件

【英文标题】：How to import component into another root component in Angular 2

【发布时间】：2017-01-17 12:52:15

【问题描述】：

我正在尝试将组件从一个文件导入另一个根组件文件。 它给出的错误为..

zone.js:484 未处理的承诺拒绝：模板解析错误： “课程”不是已知元素： 1. 如果“课程”是一个 Angular 组件，则验证它是该模块的一部分。 2. 如果“课程”是一个 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schema”以禁止显示此消息。 ("

我的第一个 Angular 2 应用程序

[ERROR ->]")：AppComponent@0:31；区域：；任务：Promise.then；值：错误：模板解析错误：(...) 错误：模板解析错误： “课程”不是已知元素：

我的 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  

我的课程.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] 给我错误

请提供解决方案。

【问题讨论】：

您使用的是哪个 Angular2 版本？

【参考方案1】：

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

import CoursesComponent from './courses.component';

@NgModule(
  imports:      [ BrowserModule],
  declarations: [ AppComponent,CoursesComponent],  //<----here
  providers:    [],      
  bootstrap:    [ AppComponent ]
)

【参考方案2】：

对于 Angular RC5 和 RC6，您必须在模块元数据装饰器的 declarations 键中声明组件，因此在您的主模块 declarations 中添加 CoursesComponent 作为 ，并从 AppComponent 元数据中删除 directives .

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  

【参考方案3】：

Angular RC5 和 RC6

如果您在 Jasmine 测试中遇到上述错误，很可能是因为您必须在 TestBed.configureTestingModule() 中声明不可渲染组件。

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

如果您在执行单元测试之前不声明组件，Angular 将不知道您的模板文件中的 <courses></courses> 是什么。

这是一个例子：

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();
  );
);

【讨论】：

这是我正在寻找的答案。谢谢！

救了我的命。谢谢。我被 React/Jest/Enzyme 宠坏了，它可以自动消除这种乏味。

【参考方案4】：

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

declarations: [
    AppComponent, YourNewComponentHere
  ] 

app.module.ts

不要忘记import 该组件。