Question

我正在创建导航菜单，该菜单基于提供有角材质的树形补充。我以下面的带有菜单节点的树为例

但是，阅读同一个组件的文档后，我发现在哪里添加路由不是很好，在这种情况下，就是我的应用程序的路由。

我的html

<zonasegura-header></zonasegura-header>
<mat-sidenav-container class="example-container">
    <mat-sidenav #sidenav mode="side" opened>

    <button mat-icon-button (click)="sidenav.toggle();iconoToggle=!iconoToggle" class="menu-button btn-toggle">
        <mat-icon *ngIf="iconoToggle">chevron_left</mat-icon>
        <mat-icon *ngIf="!iconoToggle">chevron_right</mat-icon>
    </button>

    <div class="wrapper">
        <nav id="sidebar">
            <div class="sidebar-header">
                <img src="assets/images/img_p.png" />
                <p>Lucia Pérez</p>
                <p>IPS Admin</p>
            </div>


            <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
                <!-- This is the tree node template for leaf nodes -->
                <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding>
                  <!-- use a disabled button to provide padding for tree leaf -->
                  <button mat-icon-button disabled></button>
                  {{node.name}}
                </mat-tree-node>
                <!-- This is the tree node template for expandable nodes -->
                <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding>
                  <button mat-icon-button matTreeNodeToggle
                          [attr.aria-label]="'Toggle ' + node.name">
                    <mat-icon class="mat-icon-rtl-mirror">
                      {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
                    </mat-icon>
                  </button>
                  {{node.name}}
                </mat-tree-node>
              </mat-tree>


            <ul class="menu-final">
                <li><span class="material-icons"> account_box</span>Ayuda y Soporte</li>
                <li><span class="material-icons"> account_box</span>Cerrar Sesión</li>
                <li><span class="material-icons"> account_box</span>Terminos Legales</li>
            </ul>
        </nav>
    </div>

    </mat-sidenav>
  
    <mat-sidenav-content>
        <router-outlet></router-outlet>
        <zonasegura-footer></zonasegura-footer>
    </mat-sidenav-content>
  </mat-sidenav-container>

layout.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { ChangeDetectorRef } from '@angular/core';
import { MediaMatcher } from '@angular/cdk/layout';
import { MatSidenav } from '@angular/material/sidenav';
import { FlatTreeControl } from '@angular/cdk/tree';
import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree';

/**
 * Food data with nested structure.
 * Each node has a name and an optional list of children.
 */
interface FoodNode {
  name: string;
  children?: FoodNode[];
}

const TREE_DATA: FoodNode[] = [
  {
    name: 'Fruit',
    children: [
      {name: 'Apple'},
      {name: 'Banana'},
      {name: 'Fruit loops'},
    ]
  }, {
    name: 'Vegetables',
    children: [
      {
        name: 'Green',
        children: [
          {name: 'Broccoli'},
          {name: 'Brussels sprouts'},
        ]
      }, {
        name: 'Orange',
        children: [
          {name: 'Pumpkins'},
          {name: 'Carrots'},
        ]
      },
    ]
  },
];

/** Flat node with expandable and level information */
interface ExampleFlatNode {
  expandable: boolean;
  name: string;
  level: number;
}

/**
 * @title Tree with flat nodes
 */

@Component({
  selector: 'zonasegura-layout',
  templateUrl: './layout.component.html',
  styleUrls: ['./layout.component.scss']
})
export class LayoutComponent implements OnInit {

  iconoToggle: boolean = true;
/*
  events: string[] = [];
  opened: boolean;

  @ViewChild('sidenav') sidenav: MatSidenav;
  
  isExpanded = true;
  isShowing = false;


  mobileQuery: MediaQueryList;
  private _mobileQueryListener: () => void;

  constructor(changeDetectorRef: ChangeDetectorRef, media: MediaMatcher) {
    this.mobileQuery = media.matchMedia('(max-width: 600px)');
    this._mobileQueryListener = () => changeDetectorRef.detectChanges();
    this.mobileQuery.addListener(this._mobileQueryListener);
  }

  ngOnDestroy(): void {
    this.mobileQuery.removeListener(this._mobileQueryListener);
  }
*/
  events: string[] = [];
  opened: boolean;

  //  constructor() { }

  private _transformer = (node: FoodNode, level: number) => {
    return {
      expandable: !!node.children && node.children.length > 0,
      name: node.name,
      level: level,
    };
  }

  treeControl = new FlatTreeControl<ExampleFlatNode>(
      node => node.level, node => node.expandable);

  treeFlattener = new MatTreeFlattener(
      this._transformer, node => node.level, node => node.expandable, node => node.children);

  dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);

  constructor() {
    this.dataSource.data = TREE_DATA;
  }

  hasChild = (_: number, node: ExampleFlatNode) => node.expandable;

  ngOnInit(): void {
  }

}

Answer 1

请更新您的Stackblitz链接，以使社区可以改善对您问题的看法。

但是我想我已经了解到您正在尝试在树中添加一些链接，因此我们建议您在HTML代码中编写一些routerLink属性。我将分享一些代码，这可能有助于您从我编写的应用示例中查看出路。

<h1>Hello World!</h1>

<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
  <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle matTreeNodePadding>
    <button mat-icon-button>
      <mat-icon class="mat-icon-rtl-mirror" routerLink="YOURLINK">home</mat-icon> // HERE IS THE RESPONSE CORE
    </button>
    <mat-checkbox class="checklist-leaf-node" [checked]="checklistSelection.isSelected(node)"
      (change)="todoLeafItemSelectionToggle(node)">{{node.item}}</mat-checkbox>
  </mat-tree-node>
</mat-tree>

在这个工作示例中，我们有图标，按钮和指向其他页面的链接。突出显示

<button mat-icon-button>
  <mat-icon class="mat-icon-rtl-mirror" routerLink="YOURLINK">home</mat-icon> // HERE IS THE RESPONSE CORE
</button>

Answer 2

You will need to do the following:
1. add url attribute to FoodNode

    interface FoodNode {
      name: string;
      children?: FoodNode[];
      url:string;
    }

2. add url attribute/value to TREE_DATA:
const TREE_DATA: FoodNode[] = [
  {
    name: 'Fruit',
    url:<your url....>,
    children: [
      {name: 'Apple', url:<your url...>},
      {name: 'Banana', url:<your url...>},
      {name: 'Fruit loops', url:<your url...>}
    ]
  },
.......
3. modify:
interface ExampleFlatNode {
  expandable: boolean;
  name: string;
  level: number;
  url:string;
}
4. modify:
private _transformer = (node: MenuNode, level: number) => {
      return {
        expandable: !!node.childTreeMenu && node.childTreeMenu.length > 0,
        name: node.name,
        level: level,
        url:node.url
      };
    }
5. modify html:
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
  <!-- This is the tree node template for leaf nodes -->
  <mat-tree-node  *matTreeNodeDef="let node" matTreeNodePadding>
    <!-- use a disabled button to provide padding for tree leaf -->
    <button mat-icon-button disabled></button>
    <a href ='{{node.url}}'>
      {{node.name}}</a>
  </mat-tree-node>
  <!-- This is the tree node template for expandable nodes -->
  <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding>
    <button mat-icon-button matTreeNodeToggle
            [attr.aria-label]="'Toggle ' + node.name">
      <mat-icon class="mat-icon-rtl-mirror">
        {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
      </mat-icon>
    </button>
    <a href ='{{node.url}}'>
    {{node.name}}</a>
  </mat-tree-node>
</mat-tree>

如何向角形材料树添加链接

2 个答案: