Angular：我應該如何在這里使用 routerLink 在我的應用程序中導航？

Question

所以我有這個 url: http://localhost:3000/companies並且我想使用<a>導航到頁面http://localhost:3000/companies/:id之后點擊 3 后。

我有這個組件：

<div class="container">
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <button class="navbar-toggle collapsed" (click)="isNavbarCollapsed = !isNavbarCollapsed">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a routerLink="/" class="navbar-brand">{{title}}</a>
            </div>
            <div class="navbar-collapse" [collapse]="isNavbarCollapsed" id="navbar">
                <ul class="nav navbar-nav">
                    <li [class.active]="router.isActive('/cards', false)"> <a routerLink="/cards">Cards</a> </li>
                    <li [class.active]="router.isActive('/companies', false)"> <a routerLink="/companies">Companies</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="col-lg-12 panel panel-default">
        <h3>{{currentPageTitle | async}}</h3>
        <router-outlet></router-outlet>
    </div>
</div>

我的模塊中有這個：

let routes: Route[] = [
    { path: "companies", component: CompanyPageComponent },
    { path: "cards", component: CardPageComponent },
    { path: "companies/:id", component: CompanyPageComponent },
    { path: "cards/:id", component: CardPageComponent },
];

@NgModule({
    imports: [BrowserModule, RouterModule.forRoot(routes), FormsModule, HttpModule, CollapseModule.forRoot()],
    declarations: [BusinessCardAppComponent, CompanyPageComponent, CardPageComponent],
    exports: [],
    providers: [CardService, CompanyService],
    bootstrap: [BusinessCardAppComponent]
})

在我的 CompanyPageComponent 中，我得到了以下信息：

export class CompanyPageComponent implements OnInit {
    constructor(private companyService: CompanyService,
        private route: ActivatedRoute) { }

    ngOnInit(): void {
        this.route.params.subscribe(params => {
            let companyId = +params['id'];
            // TODO: get current company by ID
        });
    }
}

還有我應該使用的<a>標簽： <a> Company name... </a>

我花了幾個小時來讓它工作，但找不到方法......在此先感謝。

Answer 1

試試這個來建立鏈接：

<a routerLink="/companies/{{ id }}">Company name</a>

在目標組件上獲取 url 的 id：

constructor(private route: ActivatedRoute){}

ngOnInit(): void {
    this.route.params.subscribe( (params: Params) => {
         console.log(params.id) 
    });
}

請注意params.id將是一個字符串，因此如果您需要一個需要轉換的數字。