Изменить содержимое роутера-розетки изнутри

Question

У меня есть такой html в моем app.component.html:

<login-menu></login-menu>
<top-menu-bar></top-menu-bar>

<div class="grid-container">
  <router-outlet></router-outlet>
</div>

Как видите, все просто. Верхняя строка меню вводит компоненты в розетку маршрутизатора. Как я могу сделать так, чтобы внедренный компонент мог изменить содержимое этого тега? Допустим, я хочу, чтобы у этого внедренного компонента было что-то вроде этого:

<a (click)="showPersonalProfile('1')" >{{person.name}}</a>

, и при нажатии была изменена розетка маршрутизатора родительского компонента. Я пытался сделать это с помощью EventEmitter, но мне не удалось. У кого-нибудь есть пример как это решить?

Answer 1

router-outlet является заполнителем, чтобы показать любой компонент, который соответствует определенному маршруту, определенному в модуле маршрутизации.

Изменяя маршрут, мы можем контролировать, какой селектор приложений компонента будет заменен вместо маршрутизатора-розетки.

Итак, чтобы ответить на вопрос Как я могу сделать это введеннымкомпонент может изменить содержимое этого тега на выходе маршрутизатора? , мы можем сделать это, перейдя к этому конкретному компоненту с помощью router.navigate ([' path '] внутри showPersonalProfile () метод.

Answer 2

В вызове функции перейдите к маршрутизатору и задайте основной путь к нужному URL-адресу, как показано ниже

router.navigate([{outlets: {primary: 'path'}}]);