Html 从内部更改路由器出口的内容

我的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>

{{person.name}

---

并单击“父组件路由器出口”进行更改。我试着自己做，但失败了。有没有人能举例说明如何解决这个问题？

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

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

---

路由器出口是一个占位符，用于显示与路由模块中定义的特定路由匹配的任何组件

通过更改路由，我们可以控制替换哪个组件的应用程序选择器来代替路由器出口

---

那么，为了回答这个问题，我如何使注入的组件能够改变路由器出口标签的内容，我们可以通过使用router.navigate（['path']在showPersonalProfile（）方法中）导航到特定的组件来实现这一点。

似乎我使它过于复杂了，你是对的：this.router.navigate（['main-view'，'personal-profile'）；就足够了。但是将参数传递给@Input不起作用：（如果这两个组件没有父子关系，那么最好使用主题，以便在两个组件之间传递参数。这将是一个很好的参考-