Angular 2 : how to call main component function from a child component

Question

当我有很深的嵌套层次结构时，如何从子组件调用主组件函数？

我有 3 个组件，我包含在浏览器组件内部的按钮组件和我包含在主组件内部的浏览器组件。

单击按钮时，我需要调用主组件内的一个函数。

按钮组件

@Component({
    selector: 'cb-button',
    templateUrl: 'cb-button.component.html',
    styleUrls: ['cb-button.component.scss']
})

export class CbButtonComponent {

     @Output() onClick: EventEmitter<any> = new EventEmitter();

     onBtnClick(): void {
        this.onClick.emit();
    }
}

按钮组件html

<div (click)="onBtnClick()">
    <button>btn</button>
</div>

浏览器组件

@Component({
    selector: 'topology-browser',
    templateUrl: 'topology-browser.component.html',
    styleUrls: ['topology-browser.component.scss']
})

export class TopologyBrowserComponent {

   @Input('campus') campus: Campus;
}

浏览器组件 html

<div>
<h1>browser title</h1>
<cb-button (click)="editCampus()"></cb-button>
</div>

最后在主要组件中我包含了浏览器组件

ma​​in-component.ts

editCampus() {
  alert('clicked');
}

html

<topology-browser [campus]="campus"></topology-browser>

当我点击按钮时出现以下错误

Errorself.parentView.context.editCampus 不是函数

Answer 1

• 如果你知道根组件是什么类型，你可以使用Pengyy的方法。

• 如果您事先不知道是什么类型，但可以根据需要自定义根组件，那么共享服务是一个不错的方法。

• 更通用的方法是通过注入(inject) ApplicationRef 获取根组件(本人未实际测试):

constructor(app:ApplicationRef, injector: Injector) {
  app.components[0].someMethodOnMainComponent();
}

https://angular.io/docs/ts/latest/api/core/index/ApplicationRef-class.html