angular - 在 Angular 树中为页面导航添加路由

Question

我需要帮助将路由添加到 Angular 树。

HTML 代码:

<mat-tree [dataSource]="dataSource" class="tree-container" [treeControl]="treeControl">
     <mat-tree-node class="btnLinks" *matTreeNodeDef="let node" matTreeNodePadding>
      <button mat-icon-button disabled></button>
      {{node.name}}
    </mat-tree-node>
    <mat-tree-node class="btnLinks" *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>

.ts文件

interface ProfileList {
  name: string;
  children?: ProfileList[];
}

const PROFILE_DATA: ProfileList[] = [
  {
    name: 'General',
  }, 
  {
    name: 'Degrees',
  },
];

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

@Component({
  selector: 'mpn-profile-landing',
  templateUrl: './profile-landing.component.html',
  styleUrls: ['./profile-landing.component.css']
})

export class ProfileLandingComponent {

  public selectedItem : String = '';

  constructor(private breakpointObserver: BreakpointObserver) {
    this.dataSource.data = PROFILE_DATA;
  }

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

我需要添加路由，比如当我点击度数时，我需要导航到另一个页面，我不确定将路由器链接放在哪里。是否有可能做到这一点？谢谢。

Answer 1

您可以包装 {{node.name}}与 <span>喜欢:

<span click="navigateToPage(node.name)">{{node.name}}</span>

然后在您的 TS 代码中添加 private router: Router给你的构造函数并添加一个类似这样的方法:

constructor(
  private breakpointObserver: BreakpointObserver,
  private router: Router
) {
    this.dataSource.data = PROFILE_DATA;
}

navigateToPage(name: string) {
  if (name === 'Degrees') {
    this.router.navigate([<THE_ROUTE_YOU_WISH_TO_NAVIGATE_TO>]);
  }
}