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

Question

我需要实现类似于Angular文档页面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"}
];

这是一个很好的例子：Router Outlet
左侧面板中的链接应为routerLink）