Question

我正在尝试遵循角度文档，以便我只有一个特定模块的实例。具体是CoreModule和SharedModule部分。

上面链接底部的演示仅适用于在AppModule中导入CoreModule一次，其中延迟加载的HeroesModule和HeroComponent可以引用声明的UserService在CoreModule

中

当我尝试使用已经从＆＃34; CoreModule＆＃34;声明和导出的Component时，我的问题就出现了。

例如，默认HeroComponent的作用类似于：

// Exact copy except import UserService from core
import { Component }   from '@angular/core';

import { HeroService } from './hero.service';
import { UserService } from '../core/user.service';

@Component({
  template: `
    <h2>Heroes of {{userName}}</h2>
    <router-outlet></router-outlet>
  `,
  providers: [ HeroService ]
})
export class HeroComponent {
  userName = '';
  constructor(userService: UserService) {
    this.userName = userService.userName;
  }
}

但如果我修改它以包含app-title中声明的CoreModule组件，那么它会突然显示错误'app-title' is not a known element

// Exact copy except import UserService from core
import { Component }   from '@angular/core';

import { HeroService } from './hero.service';
import { UserService } from '../core/user.service';

@Component({
  template: `
    <h2>Heroes of {{userName}}</h2>
    <router-outlet></router-outlet>
    <app-title></app-title>
  `,
  providers: [ HeroService ]
})
export class HeroComponent {
  userName = '';
  constructor(userService: UserService) {
    this.userName = userService.userName;
  }
}

我复制了以下angular.io文档中的示例，并且仅修改了app/hero/hero.component.ts模板以包含<app-title></app-title>，

示例：点击＆＃34;英雄＆＃34;应用加载后按钮

https://plnkr.co/edit/SZOEvdRCT23S4DfbGmut?p=preview

编辑：第二个例子，点击＆＃34;联系＆＃34;应用加载后

https://stackblitz.com/edit/angular-2ym6ya?file=contact/contact.component.html

有关将CoreModule中的组件用于延迟加载模块的任何建议，或者有关我不应该期望这种模式工作的信息，我们将不胜感激。

Answer 1

要使用模块中的组件，指令或管道，您需要将提供它们的模块添加到imports: [...]，添加到每个模块。

服务在应用程序根范围中提升，如果由AppModule提供或导入，或者在导入它们的延迟加载模块的根范围内（延迟加载的模块将子范围引入应用程序根范围），因此只需要导入一次。

https://stackblitz.com/edit/angular-ds2rce?file=core%2Fcore.module.ts

不能使用＆＃34; CoreModule＆＃34;中声明的组件。但可以使用服务

1 个答案: