3

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

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

4

5 回答 5

2

您需要使用 TypeScript 导入来导入组件类，例如

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

然后你可以使用它@ViewChild()

@ViewChild(MyComponent) myComponent:MyComponent;
于 2016-11-02T12:54:42.910 回答
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 有一个对该类的工作引用，但只需要引用功能模块，而不是单个组件。

于 2017-03-08T03:55:44.570 回答
0

请考虑创建一个共享模块（功能），它将为两个模块提供该组件。请参阅官方文档以使用共享模块构建应用程序

于 2016-11-02T12:51:40.723 回答
0

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

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

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

于 2016-11-02T12:52:43.937 回答
0

您可以为此使用 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)
            });

        }    
        //....    
    }
于 2016-11-02T12:56:01.900 回答