Передача информации из двух дочерних компонентов в родительский компонент

Question

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

Шаг 1: Нажмите кнопку из родительского компонента А -> обновить до B Шаг 2: пользователь нажимает на кнопку с ребенком компонента B -> обновить до C

Поскольку я должен быть стойким, чтобы сохранить базовый макет из моего компонента A, каковы некоторые способы подхода к шагу 2?

Answer 1

Для этого вам необходимо использовать маршрутизацию. В компоненте A вы можете написать свой код и поместить <router-outlet></router-outlet> в разметку. А для компонента А вы можете объявить маршрутизации как

const routes = [ 
    { path: '', component: 'AComponent', children: [ 
    {path: '', redirectTo: 'b', pathMatch: 'full'}, 
    {path: 'b', component: 'BComponent'}, 
    {path: 'c', component: 'CComponent'}, 
    ]} 
] 

И на кнопку мыши, необходимо перейти по соответствующему маршруту на [routerLink]