如何在菜单树角度材质中添加导航答案

【问题标题】：how add navigation in menu tree angular material如何在菜单树角度材质中添加导航
【发布时间】：2020-07-22 22:24:28
【问题描述】：

你好我有一个侧边栏组件，它必须有一个允许在页面之间导航的菜单树，所以我想使用角度材质树，因为项目是材质的，我需要在看到节点的选项时可以导航对于那个观点，我知道在 html 中使用 routerlink 是可能的，但是由于树加载数据来自 .ts，菜单是静态的，它们将始终执行相同的选项，这是与我想要的最相似的示例不时。但我需要节点选项中的导航

https://stackblitz.com/edit/angular-qsb9c8-x4oaan

【问题讨论】：

您能展示一下您到目前为止所尝试的内容吗？

标签： angular tree angular-material

【解决方案1】：

据我了解，您希望通过单击菜单项来访问这些页面。

因此，您可以维护您在 for 循环中使用的对象本身的路径。根据您使用的示例。我正在向您展示您必须替换的更新对象。

export class FileNode {
  children: FileNode[];
  filename: string;
  type: any;
  path:string;
}

Applications: {
    Calendar: 'app',
    Chrome: 'app',
    Webstorm: 'app',
    path:'abc'
  }

您可以在 html 中使用此路径进行路由。这里我给你举个例子，你可以参考一下。

 <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
    <li class="mat-tree-node">
         <a  [routerLink]="[node?.path]">
      {{node.filename}}:  {{node.type}}</a>
    </li>
  </mat-tree-node>

【讨论】：

尝试此解决方案，但将其添加到对象时路径未定义，如果路径将其放在html的routerlink中如果导航有效，则在添加该属性路径时也会显示路径和路由在视图中作为节点的选项在任何情况下都应该隐藏
您在模型中为路径添加了一个字段吗？而在html中你也可以调用导航到所需路径的方法。
是的 this.router.navigate 为我工作！在 mat-tree-node 中添加一个 click 事件发送节点我收到它作为 ts 中方法中的参数！非常感谢您的帮助