Angular2 中的组件交互

Question

这是我的问题，我有 app 组件、header 组件和 home 组件。在应用程序组件模板中，我正在使用 <header></header> 制作 header 组件。

现在在home组件中，我想访问并调用header组件的一个方法。

如果我使用注入获取 Header 组件，注入器将创建一个新实例（组件似乎不是单例）。

如何获取已创建的特定 header 组件？

谢谢，

Answer 1

如果您希望您的 header 组件永远只是一个单独的组件，您必须将它添加到您的 bootstrap。我不完全确定这是否是您要问的。听起来您想使用服务而不是组件。

我要做的是创建一个服务，然后您可以在您的组件中调用该服务。您可以将服务视为 class，其中包含一堆函数调用（服务）。然后你会要求它们进入每个组件，比如：

import {My_Global_Service} from './global_services/MyService'

@Component{....} 
export class Header{

   constructor(private _my_global_service: My_Global_Service){}

}

然后你会 bootstrap 你的 My_Global_Service 所以它将是整个应用程序中的一个 'singleton' 实例。

import {bootstrap}    from 'angular2/platform/browser';
import {My_Global_Service} from './global_services/MyService'

bootstrap(MyApp, [
      My_Global_Service
])

然后您可以从您的主组件调用相同的服务：

import {My_Global_Service} from './global_services/MyService'

@Component{....} 
export class Home{

   constructor(private _my_global_service: My_Global_Service){}

}

这将在 header 和主组件中包含所有相同的 variables/functions。

Angular2 中的组件交互

Component interaction in Angular2

web-component

angular