Angular：按鈕上有路由器鏈接

Question

我正在嘗試使用routerlink，但遇到了一些問題。 單擊該按鈕不會執行任何操作。 我可以直接通過 url 導航到該頁面，並且路線很好

我想 go 到 /addEditControl/{{controlId}}

SelfServiceDetails.component.ts 中的 controlId 是輸入

@Component({
selector: 'self-service-details',
templateUrl: '../templates/self-service-details.component.html',
providers: [SelfServiceDetailsService,ControlSpecificDataService]
})

export class SelfServiceDetailsComponent {
@Input() controlId: string; 

}}

在我的 HMTL 組件中，我正在像這樣在按鈕上設置路由器

<button  routerLink="/addEditControl/{{controlId}}">Onboard Control</button>

我的應用路由模塊

import { NgModule }             from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';

  import {ControlsListComponent} from './components/controls-list.component';
  import {ControlDetailsComponent} from './components/controlDetails.component';
  import {ControlHistoryListComponent} from './components/control-history-list.component';
 import {MyControlsComponent} from './components/myControls.component';
  import {SnowDataComponent} from './components/snowData.component';
 import {PageNotFoundComponent} from './components/pageNotFound.component';
 import { LandingPageComponent } from 'app/components/landingPage.component';
 import { HomePageComponent } from './components/home-page.component';
 import { ControlDetailGuard } from './services/control-detail-guard.service';
 import { AddEditControlComponent } from './SelfServiceForm/add-edit-control.component';

 const routes: Routes = [
 { path: 'addEditControl/:id', component: AddEditControlComponent},  

 ];
@NgModule({
 imports: [ RouterModule.forRoot(routes) ],
 exports: [ RouterModule ]
  })
export class AppRoutingModule {}

編輯： controlId 被正確填充，我已經用<p>{{controlId}}</p>進行了測試

Answer 1

對於動態鏈接，您應該做以下事情

動態屬性綁定

<button  [routerLink]="['/addEditControl', controlId ]">Onboard Control</button>

Answer 2

您應該在這樣的按鈕上使用 RouterLink：

[routerLink]="['/admin/home', param to pass]"

您需要在 routerLink 周圍包含 []。

Answer 3

這不是應該如何做的。 如果您想使用按鈕導航，請調用 function 並傳遞您要導航的字符串 => addEditControl('controlID')

在你的 .ts 文件中：

import { Router } from '@angular/router';
  constructor(private router: Router) { }

addEditControl(link:string) {
this.router.navigate([link]);
}

Answer 4

解決方案1：將您的按鈕放在一個href中：

<a routerLink="/addEditControl/{{controlId}}"><button class="btn btn-success pull-right" > Onboard Control</button></a>

解決方案2： onClick 按鈕導航到您的頁面！

import { Router } from '@angular/router';
constructor(private router: Router) { }
    onClick= function () {
            this.router.navigateByUrl('/addEditControl/'+this.controlId);
    };