Question

我想使用模块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并使用标签＆＃39;笑话＆＃39;

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 { }

但是，当我运行应用程序时，我收到错误未捕获错误：模板解析错误：＆＃39;笑话＆＃39;不是一个已知的元素： 1.如果开玩笑＆＃39;是一个Angular组件，然后验证它是否是该模块的一部分。

Answer 1

您的导入和声明似乎有误。像这样纠正他们：

在JokeModule。

AppModule

从entryComponents: [JokeComponent]移除JokeModule，而不是AppModule将其添加到entryComponents: [AppComponent]。
从imports:[ AppComponent ]

JokeModule

JokeComponent中导出JokeModule exports : [JokeComponent]

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

工作DEMO

Answer 2

感谢您的回答。主要问题是我提出的代码是错误的。最初我有一个使用Angular / cli创建的简单应用程序。 src / app / jokes中的joke.component.ts（我想要一个单独的文件夹来实现这个功能）

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中使用标签'笑话'，如下所示

import { Component } from '@angular/core';

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

I am not importing joke.component.ts because I have imported and declared it in app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
//import { JokeModule } from './jokes/joke.module';
import { JokeComponent } from './jokes/joke.component';
@NgModule({
  declarations: [
    AppComponent, JokeComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

我看到的是app.module.ts中导入和声明的任何内容都可用于其他组件（在本例中为app.component）。对于具有多种功能的大型程序，我想在单独的文件夹中创建不同功能的组件。我不想要的是导入app.module.ts中的每个组件;对于我想要创建像joke.module.ts

这样的模块的每个功能

import { NgModule } from '@angular/core';
import { JokeComponent } from './joke.component';
@NgModule({
  declarations: [
    JokeComponent
  ],
  exports: [JokeComponent]
})

export class JokeModule { }

在这个模块中，我导入并声明了功能的组件，我希望在app.module.ts中导入和声明这些模块是可行的，但它没有。

如何使用模块在Angular 6

2 个答案: