我是 Angular 2 的新手，所以如果这个问题对你来说听起来微不足道，请原谅。我正在 Angular 2 中创建一个功能模块，我将从该模块中导出所有组件。主模块可以导入它并将该模块添加到导入列表中。这样，主模块中的所有“模板”都可以访问功能模块的组件。
但我想要的是：在我的主要模块组件之一中，我想将功能模块的组件称为 ViewChild。
【问题讨论】：
标签： angular angular2-components angular2-modules
您需要使用 TypeScript 导入来导入组件类，例如
import {MyComponent} from './my.component'
那么你可以在@ViewChild()使用它
@ViewChild(MyComponent) myComponent:MyComponent;
【讨论】：
@NgModule()s、declarations: []、imports: [] 和 exports: [] 来在模块模板中使用组件、指令和管道以及使用路由器进行延迟加载，但对于 @ViewChild()，您只需要 TypeScript导入以使用MyComponent 明确您所指的类。这后面的部分与@NgModule() 没有任何关系。
@ViewChild 可以与本地 id 一起使用（以 # 为前缀），您不必导入定义类。当然，您不能将变量 comp 键入为 MyComponent。
在模板中：
<my-component #myComponent></my-component>
在javascript中：
@ViewChild('myComponent') comp: any;
（注意引号）
或者
您可以从功能模块重新导出组件
// my.module.ts
import {MyComponent} from './my.component'
@NgModule({
...
})
export class MyModule {}
export {MyComponent}
然后在消费组件中（您要使用@ViewChild）
import {MyComponent} from '../common/my.module'
现在 Typescript 有一个对该类的工作引用，但只需要引用功能模块，而不是单个组件。
【讨论】：
ViewChild 是一个装饰器，用于查询模板以获取从功能模块导入的子级。 如果您的模板是：
<div>
<child></child>
</div>
通过使用@ViewChild，您可以获得您的子组件参考
【讨论】：
您可以为此使用 service 和 EventEmitter。
import { Injectable, EventEmitter } from '@angular/core';
@Injectable()
export class MyService {
resultIdFound: EventEmitter<any> = new EventEmitter<any>();
resultFound(resultId: string) {
this.resultIdFound.emit(resultId)
}
}
源组件是：
import { Component, EventEmitter } from '@angular/core';
import { MyService } from './myservice';
@Component({
//..
})
export class SourceComponent implements OnInit {
constructor(
private router: Router,
private myService: MyService) { }
onResultFound(resultId: string): void {
this.myService.roomSeached(this.selectedRoom.id)
}
}
目标组件是：
import { Component, EventEmitter,NgModule } from '@angular/core';
import { MyService } from './myService';
@Component({
//...
})
export class TargetComponent implements OnInit {
constructor(
private myService: MyService
) {
this.myService.resultIdFound.subscribe((result: any) => {
console.log(result)
});
}
//....
}
【讨论】：
请考虑创建一个共享模块（功能），该模块将向两个模块提供该组件。使用共享模块构建应用程序请参阅官方documents
【讨论】：