Одним из многих способов решения этой проблемы является использование событий , загрузка источника событий в вашу общую службу public onChange: EventEmitter<string> = new EventEmitter<string>();, а затем передача его от родителя его дочерним элементам или наоборот, как это
changeMessage(message: string) {
this.currentMessage = of(message)
this.onChange.emit(message);
}
В каждом случае, когда вы хотите, чтобы требуемый компонент присоединился к коммуникативному кусту, добавьте перехватчик событий из этого сервиса: this.myService.onChange.subscribe(message=> this.message = message);
Таким образом, вы можете реализовать «внешний», но полныйфункциональный подход для обмена данными в режиме реального времени между маршрутами.
см. этот пример .Или вы можете увидеть это немного отличную реализацию , которая объединяет родственные компоненты и маршруты.
Или вы можете использовать уникальные параметры маршрута
Byтаким образом, вы бы не позволили никаким сторонним компонентам из другой сосуществующей иерархии вмешиваться в эти внутренние сообщения, которыми обмениваются определенный модуль маршрутов, потому что вы неоправданно передаете их между ними.
Вы бы сконфигурировали модуль следующим образом:
export const routes: Routes = [
{ path: '', redirectTo: 'component-one/:message', pathMatch: 'full' },
{ path: 'component-one/:message', component: ComponentOne },
{ path: 'component-two/:message', component: ComponentTwo,
children: [
{ path: '', redirectTo: 'child-one', pathMatch: 'full' },
{ path: 'child-one/:message', component: ChildOne },
{ path: 'child-two/:message', component: ChildTwo }
]
}
];
Так, чтобы каждый вызов одной из этих филиалов сопровождал некоторый параметр, который будет использоваться в html-ядре компонента.
В следующем примере я сделал параметр в вызове функциинеобязательно, чтобы сказать, был ли он вызван загрузкой компонента, таким образом регенерирован, и, тем не менее, он происходит от нажатия кнопки, следовательно, просто обновляется соответственно для некоторых пользовательских частей.
newMessage(param?) {
if(typeof(param) === 'undefined')
this.message = "Parent";
else
this.message = param;
var actualroute=this.router.routerState.snapshot._root.children[0].children[0].value.url[0].path;
this.router.navigate(['/component-two', this.message , actualroute, this.message ],{relativeTo: this.route});
}
Вы можете видеть, как все это работает здесь .Спасибо за эту забавную задачу.
Слабое место : при каждом обновлении переменной message маршрутизатор снова и снова переходит к той же иерархии, которая особенно затратна для времениреализации большего размера.
Сильная сторона : когда вы вызываете router.navigate, существует возможность передавать пользовательские данные между компонентами, например, «mesage1» для дочернего элемента и «message2» для родительского элемента водин ряд: this.router.navigate(['/component-two', 'message2' , 'child-one', 'message1']);.Это можно сделать, но очень сложно и запутанно, используя услугу.