Angular 2向应用程序根组件发出事件

Question

我想向作为我的应用程序的引导程序的组件发出一个事件。这个组件是websocket连接的处理程序，我需要发送一条消息，这就是我必须发出这个事件的原因。

在bootstrap组件中，我只有<router-outlet></router-outlet>所以我无法意识到我如何能够收到这个事件。

例

App.component.html

<router-outlet></router-outlet>

App.component.ts

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

export class AppComponent {
}

App.module.ts

...
@NgModule({
  ...
  bootstrap: [AppComponent]
})

APP-routing.module.ts

...
const routes: Routes = [
  { path: 'display', component: MapDisplayComponent }
];

地图 - display.components.ts

@Component({
  selector: 'app-map-display',
  templateUrl: './map-display.component.html',
  styleUrls: ['./map-display.component.scss']
})
export class MapDisplayComponent {
    @Output() sendMessage: EventEmitter<any> = new EventEmitter<any>();
}

所以问题是地图显示组件必须将事件发送给他的父母

Answer 1

使用服务。

1. 将服务注入组件和主要组件。
2. 向服务添加发射器或Observable。
3. 如果使用发射器，在服务中添加一个函数来更改Observable的值/发出一个新值。
4. 使用组件中的功能。
5. 订阅主组件中的发射器或Observable。

希望这可以帮助。

Answer 2

您可以使用服务来管理组件之间的通信。 看看this问题和答案。 不要忘记将服务注入组件和主要组件