我需要帮助将路由添加到 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,
};
}
我需要添加路由,比如当我点击度数时,我需要导航到另一个页面,我不确定将路由器链接放在哪里。是否有可能做到这一点? 谢谢。
最佳答案
您可以包装 {{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>]);
}
}
关于angular - 在 Angular 树中为页面导航添加路由,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56162201/