时间戳

首页 > 解决方案 > 如何使用模块在 Angular 6 中指定多个组件

angular - 如何使用模块在 Angular 6 中指定多个组件

问题描述

我想使用模块 joke.module.ts 来指定多个组件；在这种情况下，我从 src/app 中的 joke/joke.module.ts 中的 JokeComponent 开始

import { Component } from '@angular/core';/
@Component({
  selector: 'joke',
  template: `
  <h1>What did the cheese say when it looked in the mirror?</h1>
  <p>Halloumi (hello me)</p>  `
})

export class JokeComponent {
}

在 app.component.ts 我想使用 joke/joke.module.ts 并使用标签“笑话”

import { Component } from '@angular/core';
import { JokeModule } from './joke/joke.module';
@Component({
  selector: 'app-root',
  template: `
  <joke></joke>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
}

我在 src/app/joke 中创建了模块 joke.module.ts

import { NgModule } from '@angular/core';
import { JokeComponent } from './joke.component';
import { AppComponent } from '../app.component';

@NgModule({
  imports:      [ AppComponent ],
  declarations: [
    JokeComponent
  ],
  entryComponents: [JokeComponent]
})
export class JokeModule { }

但是，当我运行应用程序时，我收到错误 Uncaught Error: Template parse errors: 'joke' is not a known element: 1. 如果 'joke' 是 Angular 组件，则验证它是否是该模块的一部分。

标签： angular

解决方案

您的导入和声明似乎是错误的。像这样纠正它们：

  1. 在JokeModule您的AppModule.

  2. entryComponents: [JokeComponent]从中删除JokeModule，而不是将其添加AppModule为entryComponents: [AppComponent]。

  3. imports:[ AppComponent ]从中删除JokeModule

  4. 导出为 JokeComponent_JokeModuleexports : [JokeComponent]

您的 bootsrtap 组件应该是AppComponent，其余组件将是您的组件的子app-root组件。

工作演示

推荐阅读