角材料：单击mat-sidenav中的项目应更改mat-sidenav-content中的内容

Question

我需要在angular docs页面中实现类似于nav菜单的菜单： https : //angular.io/tutorial/ 。

菜单在左侧，单击每个项目都会更改显示在mat-sidenav-content -它将显示注册页面，用户列表等-取决于单击哪个链接。 但是菜单必须始终可用。

现在我有这样的事情：

例如，如果我单击注册链接，如何实现注册-注册页面将显示在内容栏中等等，并带有其他按钮？

Answer 1

如果我理解您的话，则应将左侧面板包裹在路由中（添加新的插座），并使用面板修改组件，使用每个路由的链接数组创建服务或帮助程序。 然后听路由，并选择链接数组。

或者您可以将数据传递到路由配置

const routes: RouterConfig = [
  {path: '', redirectTo: '/heroes', pathMatch : 'full'},
  {path : 'registration', component : LeftPanelComponent, data : {some_data : 'some value'}, outlet: "aside"}
];

这是一个很好的例子： 路由器插座
左侧面板中的链接应为routerLink）