Angular 2组件函数调用

Question

我想从组件调用函数。

app.component.html

<div class="side"> 
<app-menu></app-menu> 
</div> 
<div class="page"> 
    <router-outlet></router-outlet> 
</div> 

app.component.ts

import { Component, Input } from '@angular/core'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 

export class AppComponent { 
    title = 'app works!'; 

} 

如何在函数调用 '<app-menu></app-menu>'？

应用程序菜单（menu.component.ts）

import { Component } from '@angular/core'; 

@Component({ 
    ... 
}) 
export class MenuComponent { 
    addItem(index: number, heading: string, route: string): void { 
    } 
    groups: Array<any> = []; 
} 

Answer 1

不知道你试图完成什么。 我的猜测

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 

export class AppComponent { 
    @ViewChild(MenuComponent) menu:MenuComponent; 

    title = 'app works!'; 

    // can't be called before the `ngAfterViewInit()` lifecycle callback. 
    foo() { 
    this.menu.addItem(1, "heading foo", "some route"); 
    } 
}