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

Question

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

在引导组件中，我只有<router-outlet></router-outlet>这样我无法意识到如何接收事件。

例子

应用程序组件.html

<router-outlet></router-outlet>

应用程序组件.ts

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

export class AppComponent {
}

应用程序模块.ts

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

应用程序路由.module.ts

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

地图显示.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。

希望这可以帮助。