如何使用 Angular 从子组件路由 Angular Material

Question

我正在尝试在我创建的工具栏组件上设置路由。工具栏组件在我的 app.component 中被调用，这就是它被添加到 DOM 中的方式。我在该工具栏上有一个带有 3 个按钮的菜单，我想让它们路由到不同的链接。

我尝试将 AngularRouting 导入我的子组件（工具栏），但我不确定我在做什么，哈哈。

./toolbar/toolbar.ts:

     <button mat-menu-item>
       <mat-icon>home</mat-icon>
       <span>Home</span>
     </button>
     <button mat-menu-item>
       <mat-icon>assignment</mat-icon>
       <span>About</span>
     </button>
     <button mat-menu-item>
       <mat-icon>help</mat-icon>
       <span>Help</span>
     </button>
   </mat-menu>

如何在使用 angular material 的子组件上设置路由？

Answer 1

这可以通过多种方式实现。

使用 routerLink

<button routerLink='/home' mat-menu-item>
   <mat-icon>home</mat-icon>
   <span>Home</span>
 </button>

2 使用 .ts 文件 HTML

     <button (click)="navigateToHome()" mat-menu-item>
       <mat-icon>home</mat-icon>
       <span>Home</span>
     </button>

TS

constructor(private router:Router){}

navigateToHome(){
this.router.navigateByUrl('/home');
}

使用 Angular material 不会改变您的导航方式。

希望对您有所帮助！

如何使用 Angular 从子组件路由 Angular Material

How to Use Angular Routing from Child Component Using Angular Material

angular-routing

angular-material

angular