在angular 2中，如何从不同的模块访问组件

Question

我是angular 2的新手，所以如果这个问题听起来微不足道，请原谅我。我正在angular 2中创建一个特性模块，我将从这个模块中导出所有组件。主模块可以导入该模块，并将该模块添加到导入列表中。通过这样做，主模块中的所有"模板"都可以访问特性模块的组件。

但是我想要的是:在我的主模块的组件之一，我想引用功能模块的组件作为ViewChild.

Answer 1

你需要用像

这样的TypeScript导入方式导入组件类

import {MyComponent} from './my.component'

则可以在@ViewChild()

中使用

@ViewChild(MyComponent) myComponent:MyComponent;

Answer 2

@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有了对该类的有效引用，但只需要引用特性模块，而不需要引用单个组件。

Answer 3

ViewChild是一个装饰器，用于查询模板以获取从特性模块导入的子模块。如果你的模板是:

<div>
  <child></child>
</div>

通过使用@ViewChild你可以得到你的子组件引用

Answer 4

你可以使用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)
            });
        }    
        //....    
    }

Answer 5

请考虑创建一个共享模块(特性)，它将为两个模块提供该组件。使用共享模块构建应用请参见官方文档