将组件A上的视图更新为组件B上的数据库更新

Question

组件A是侧栏，其显示类别列表并仅启动一次，因此无法使用ngOnInit

College
Faculty
Workshop
Time
Email

组件B是设置组件，其表单在提交时更新这些类别的名称并将更改存储在DB中 目前这些类别名称是硬编码的

我想在组件B中更新后立即更改组件A的视图。

App结构

app
   |--Admin
         |--Sidebar
                  |--sidebar.component.ts
         |--Setting
                  |--setting.component.ts
         |--Layout
                  |--layout.component.ts
                  |--layout.component.html

两个组件都属于布局组件

layout.component.html

   <sidebar (mouseenter)="mouseEnter()" (mouseleave) = "mouseLeave()"></sidebar>
   <router-outlet></router-outlet>

路径“/” - 路由器插座显示control-home
显示管理员名称

对于路径“/ control-home / setting” - 路由器插座显示设置页面

sidebar.component.ts

import { Component} from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
import { Router } from '@angular/router';

@Component({

    moduleId : module.id,
    selector    : 'sidebar',    
    templateUrl : 'sidebar.component.html',
    directives  : [ ROUTER_DIRECTIVES],
})

export class SidebarComponent{
}

sidebar.component.html

<a [routerLink] = "['/control-home/setting']" class="enable-tooltip" data-placement="bottom" title="Settings" ><i class="gi gi-cogwheel"></i></a>

设置组件有一个更新值并存储在DB中的表单。

Answer 1

只需使用带有observable的共享服务就全局通知某些更改，并让每个感兴趣的组件对通知本身起作用。

请参阅https://angular.io/docs/ts/latest/cookbook/component-communication.html