Angular2访问另一个组件方法,而无需使用@ViewChild加载其模板

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

我希望它们只在我在不同的场景中调用这个子组件时运行,但我想在AppComponent中按需访问这些子自定义方法 .

So how do I do it?

这是一个描述问题的掠夺者:http://plnkr.co/edit/FT6GTJ8mmUnyFxJAPbGV

你可以看到仪表板test()函数被调用,这就是我 want ,但是,它的ngOnInit函数也被初始化了,我 don't want .

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

我虽然从AppComponent模板中删除 <my-dashboard></my-dashboard> 是非常明显的,但是没有加载仪表板模板,但是我得到错误,仪表板本身没有定义(如果你删除 <my-dashboard></my-dashboard> 并再次运行plunker你可以看到错误)即使我有通过进口声明包括它 .

我错过了什么?

EDIT-----------------------------------------------------------------------------------------------------------------

因此,最后,您必须使用服务来存储可重用的数据/功能,而无需任何操作 .

回答(1)

2 years ago

不完全确定为什么你会想要这个,但你可以尝试使用 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

但是我再一次看不出你为什么要做这样的事情 . Apparently there is logic in your component which shouldn't be there