У меня есть MasterComponent, который загружает заголовок, нижний колонтитул, боковую панель и т. Д. В заголовке есть раскрывающийся список, параметры которого устанавливаются после входа пользователя в систему. Я хочу, чтобы заголовок был постоянным, даже если я перемещаюсь по разным маршрутам, в которых загружаются разные дочерние компоненты. , Означает, что выбранный параметр не должен изменяться и значение раскрывающегося списка должно быть доступно во всех дочерних компонентах. При изменении значения раскрывающегося списка текущий дочерний компонент должен быть обновлен / перезагружен.

Как мне подойти к этой проблеме? Я хочу, чтобы событие-слушатель было функциональным. Как только модель из MasterComponent изменится, перезагрузите текущий дочерний компонент. При обновлении переменной переменной MasterComponent ChildComponent прослушивает обновление и запускает некоторую функцию или снова вызывает некоторый API и перезагружает ChildComponent.

// routes
const appRoutes: Routes = [
    {
        path: '',
        redirectTo: 'login',
        pathMatch: 'full',
    },
    {   path: 'login', component: LoginComponent },
    {   path: 'logout', component: LogoutComponent },
    {
        path: '',
        component: MasterComponent,
        canActivate: [AuthGuard],
        children: [
            { path: 'record/create', component: RecordCreateComponent }, // create record for selectedRestaurant in MasterComponent
            { path: 'record/', component: RecordComponent }, // shows all record of current selectedRestaurant in MasterComponent
            { path: 'record/:id/update', component:RecordUpdateComponent }, // show form to edit record having id
            { path: 'record/:id', component: RecordComponent }, // show record details having id
        ]
    },
    { path: '**', redirectTo: 'login' }
];

// MasterComponent

@Component({
    selector: 'master',
    templateUrl: templateUrl,
    styleUrls:[styleUrl1]

})
export class MasterComponent implements AfterViewInit, OnInit{
    restaurants: Array<Restaurant> = [];
    user:User;
    selectedRestaurant: Restaurant;

    constructor(private router: Router, private storageHelper:StorageHelper){
    }
    ngAfterViewInit() {
    }
    ngOnInit(){
        this.user = JSON.parse(this.storageHelper.getItem('user'));
        this.restaurants = this.user.restaurants;
        this.selectedRestaurant = this.restaurants[0];
        this.router.navigate(['/record/' + this.selectedRestaurant.id]);
    }
    onRestaurantChange(){
        this.router.navigate(['/record/' + this.selectedRestaurant.id]);
    }
    createRecord(){
    }
}