2

我正在尝试使用@ViewChild 访问子组件方法，它可以工作，但我也被迫加载它的模板，我不想这样做，因为这也迫使子组件OnInit, AfterViewInit和其他系统功能运行.

我希望它们仅在我在不同的场景中调用此子组件时运行，但我想在 AppComponent 中按需访问此子组件的自定义方法。

那么我该怎么做呢？

这是一个描述问题的 plunker：http: //plnkr.co/edit/FT6GTJ8mmUnyFxJAPbGV

你可以看到dashboards test() 函数被调用了，这就是我想要的，然而，它的ngOnInit 函数也被初始化了，这是我不想要的。

template: <h1>AppComponent</h1><my-dashboard></my-dashboard>

我虽然很明显<my-dashboard></my-dashboard>从 AppComponent 模板中删除，不加载仪表板模板，但是我得到了仪表板本身没有定义的错误（如果你删除<my-dashboard></my-dashboard>并再次运行 plunker，你可以看到错误）即使我已经包含它通过导入语句。

我错过了什么？

编辑 - - - - - - - - - - - - - - - - - - - - - - - - - -------------------------------------------------- --------------

因此，最后，您必须使用服务来存储可重用的数据/功能才能正常工作。

4

1 回答 1

3

不完全确定您为什么想要这个，但您可以尝试将其Component用作提供程序。虽然我看不出这怎么会落入“如果它看起来很愚蠢，但它有效，它并不愚蠢”的规则之下。

import { Component, OnInit, AfterViewInit, ViewChild } from '@angular/core';
import { DashboardComponent } from './dashboard.component';

@Component({
    selector: 'my-app',
    template: `
      <h1>AppComponent</h1>
    `,
    providers: [DashboardComponent]
})

export class AppComponent implements OnInit {

    constructor(public dashboardComponent: DashboardComponent){}

    ngOnInit() {
        this.dashboardComponent.test();
    }

}

plnkr

我假设的另一种方式可能是简单地启动一个新的类实例，这将导致如下所示：

import { Component, OnInit, AfterViewInit, ViewChild } from '@angular/core';
import { DashboardComponent } from './dashboard.component';

@Component({
    selector: 'my-app',
    template: `
      <h1>AppComponent</h1>
    `
})

export class AppComponent implements OnInit {

  public dashboardComponent: DashboardComponent = new DashboardComponent();

    constructor(){}

    ngOnInit() {
        this.dashboardComponent.test();
    }
}

plnkr

但是我又一次看不到你为什么想做这样的事情。显然你的组件中有不应该存在的逻辑

于 2016-08-05T13:20:37.350 回答