从内部更改路由器插座的内容

Question

我的 app.component.html 中有这样一个 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 是一个占位符，用于显示与路由模块中定义的特定路由匹配的任何组件。

通过改变路由，我们可以控制哪个组件的 app-selector 被替换为 router-outlet。

所以，要回答这个问题 我怎样才能让注入的组件可以改变这个 router-outlet 标记内容？ 我们可以这样做，通过使用 router.navigate([ 'path'] 在 showPersonalProfile() 方法中。

Answer 2

在函数调用中，路由器导航并将主路径设置为您想要的 url，如下所示

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