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

Question

我想向作为我的应用程序 bootstrap 的组件发出一个事件。此组件是 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]
})

应用-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

使用服务。

将服务注入组件和主组件。
向服务添加发射器或 Observable。
在服务中添加一个函数来更改 Observable 的值/如果您使用发射器则发射一个新值。
使用组件中的函数。
在您的主组件中订阅发射器或 Observable。

希望对您有所帮助。

Answer 2

您可以使用服务来管理组件之间的通信。

查看个问题和答案。
不要忘记将服务注入组件和主组件

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

Angular 2 emit event to application root component

eventemitter

angular2-routing

angular