如何使用角材料從子組件中使用角布線

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>

如何在使用角形材質的子組件上設置布線？

Answer 1

這可以通過幾種方式來實現。

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材質不會改變您的導航方式。

希望能幫助到你！