angular - 如何将链接添加到角度材质树
问题描述
我正在创建一个导航菜单,基于提供有角材料的树补充。我以以下带有节点的树为例作为我的菜单
但是,在阅读同一组件的文档时,我找不到很好的添加路由的位置,在这种情况下是我的应用程序的路由。
我的 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>
布局.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 {
}
}
解决方案
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>
推荐阅读
- mongodb - MongoCursor 之间的区别
vs FindIterable - apache-spark - 来自 Docker 的 Neo4j 和 Spark 的 ServiceUnavailableException
- c# - 将用户重定向到不同 ASP.NET Core Razor 网站中的页面
- git - 更改 git 中的默认日志大小
- angular - 角度,如何通过拦截器将 XML 响应转换为 JSON
- sql - 显示要更新的行然后提交
- javascript - 播放视频后Javascript自动刷新
- macos - 在 OSX 上使用 MLT Melt 的 Mov 文件播放错误
- reactjs - React Provider Pattern,子组件中的道具没有更新
- react-native - 应用关闭时检测来电