如果组件的方法位于不同的模块中,如何从另一个组件调用组件的方法?

时间:2017-10-16 13:42:31

标签: angular typescript

我在名为MenuComponent的模块中有menu,我想在另一个模块中的getMenu(path:string)中调用此组件的AppComponent方法。

这是我的MenuComponent

import { Component, OnInit } from '@angular/core';
import {
TreeComponent,
TreeNode,
} from 'angular-tree-component';
import { MenuService } from '../../menu.service';

@Component({
selector: 'menu',
templateUrl: './menu.component.html',
styleUrls: ['./menu.component.css']
})
export class MenuComponent {

constructor(private menuService: MenuService) { }

nodes:any;

 getMenu(path:string): void {
   this.menuService.getData(path).subscribe(data => {
         // Read the result field from the JSON response.

         let newValue = JSON.stringify(data).replace('{"Node":', '[');
         newValue = newValue.substring(0,newValue.length - 1);
         newValue+="]";
        const menu=JSON.parse(newValue);
         this.nodes = menu;
      });

 }

}

1 个答案:

答案 0 :(得分:1)

导入模块,并调用方法 - 下面显示的静态和实例版本...在你的情况下它是一个实例方法,所以第二个例子应该可以工作。

import { MenuComponent } from './menu';

// Static
MenuComponent.getMenu('...');

// or Instance
const menu = new MenuCompnent(myMenuService);
menu.getMenu('...');

您需要注入菜单服务。您可以导入模块并以相同的方式构建其中一个模块。

查看Angular component interaction docs以了解如何执行此操作“The Angular Way”。有两种简洁的模式可以在两个组件之间进行交互。