时间戳

首页 > 解决方案 > Angular：我应该如何在这里使用 routerLink 在我的应用程序中导航？

angular - Angular：我应该如何在这里使用 routerLink 在我的应用程序中导航？

问题描述

所以我有这个网址：http://localhost:3000/companies我想http://localhost:3000/companies/:id在点击<a>标签后使用 routerLink 导航到页面。

我有这个组件：

<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>

我花了几个小时来让它工作，但找不到方法......在此先感谢。

标签： angulartypescript

解决方案

试试这个来建立链接：

<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将是一个字符串，因此如果您需要一个需要转换的数字。

推荐阅读