Angular2 Routing: несколько компонентов сразу

Question

У меня есть угловое приложение 2, в котором есть две независимые функции, которые являются компонентами рядом друг с другом (назовем их A и B). Теперь я хочу изменить то, что живет в компоненте A через маршрутизацию. Все идет нормально. Это будет обычный сценарий, в котором мы будем называть компонент A компонентом контента приложения.

Моя проблема заключается в том, чтобы я мог также изменить то, что находится внутри компонента B, путем маршрутизации.

Конечно, я мог теперь создавать маршруты, как http://foo.bar/what-lives-in-a/123/what-lives-in-b/abc Но представьте себе приложение, где есть сотни вещей, которые могли бы жить в А и dozends вещей, которые могли бы жить в Б. Я думаю, что это будет слишком болезненным, чтобы создать все эти подпункты вручную.

Так кто-нибудь из вас знает хороший способ решить эту проблему?

Answer 1

Что вы хотите, может быть достигнуто с помощью 2 независимых роутеров. Это имеет смысл, поскольку компоненты независимы. Таким образом, вы, вероятно, уже имея основной выход маршрутизатора, который находится в верхнем компоненте и определяется так: <router-outlet></router-outlet>

Чтобы указать другой вам нужно написать следующее: <router-outlet name="forComponentB"></router-outlet> После этого вы будете иметь добавить маршрут для указанного выпускного отверстия маршрутизатора, как что:

,{path: "comp-b-path", outlet: "forComponentB", component: ComponentB}

Так что в результате URL будет выглядеть примерно так: BaseUrl/сост-а-гиперссылка (forComponentB: комп-б-путь), и вы может управлять государством обоих компонентов независимо путем изменения основного URL-адреса или одного из них в круглых скобках. Обратите внимание, что вы можете добавлять параметры к каждому из URL-адресов, поэтому он очень гибкий.