Question

我是棱角分明2的新手，所以如果这个问题对你来说听起来微不足道，请原谅。我正在以角度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

请考虑创建一个共享模块（功能），该模块将为该模块提供该组件。有关使用共享模块构建应用程序的信息，请参阅官方documents

Answer 4

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

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

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

Answer 5

您可以使用service和EventEmitter。

private void operator_click(object sender, EventArgs e) {
  double v;

  if (!double.TryParse(textBox1.Text, out v)) {
    // textBox1.Text doesn't contain double, e.g. "bla-bla-bla"

    //TODO:put a warning/error message here

    return; 
  }

  // textBox1.Text has a double value which is v
  operationperformed = (sender as Button).Text;
  result = v;
  b = true; 
}

源组件是：

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)
        }
    }

如何以角度2访问不同模块的组件

5 个答案: