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

Question

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

但我想要的是：在我的主要模块的组件之一中，我想将功能模块的组件称为 ViewChild。

Answer 1

请考虑创建一个共享模块（功能），它将向两个模块提供该组件。请参阅官方 documents 以使用共享模块

构建应用程序

Answer 2

ViewChild 是一个装饰器，用于查询模板以获取从功能模块导入的子项。如果您的模板是：

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

通过使用@ViewChild，您可以获得您的子组件引用

Answer 3

您需要使用

之类的 TypeScript 导入来导入组件 class

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

然后你可以在@ViewChild()

中使用它

@ViewChild(MyComponent) myComponent:MyComponent;

Answer 4

您可以为此使用服务和 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

@ViewChild 可与本地 ID（以# 为前缀）一起使用，您不必导入定义 class。当然，您不能将变量 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 有一个对 class 的工作引用，但只需要引用功能模块，而不是单个组件。

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

How to access a component from different module in angular 2

angular2-components

angular2-modules

angular