具有特定網址的Angular 2路由

Question

我目前正在開發在特定網址上打開的角度應用程序：

localhost:3000/?param1=abc,def&param2=abcdefghi 

現在我要實現角度路由。 所以我有2條路線： 1. mainComponent 2.dataComponent

在我的index.html中，將設置為：

<base href="/">

將應用程序配置為使用路由后，我的應用程序僅以localhost：3000打開，即使將param1，param2添加到url之后，它也將重定向到localhost：3000

我該如何解決？ 因為僅在打開鏈接時傳遞參數，所以它是動態的

app.module.ts：

const appRoutes: Routes = [
  { path: 'mainComponent', component: MainComponent },
  { path: 'dataComponent',      component: DataComponent },
  {path : '' , component:MainComponent}
];

app.component.html：

<nav>
    <a routerLink="/mainComponent" routerLinkActive="active">Main</a>
    <a routerLink="/dataComponent" routerLinkActive="active">Data</a>
</nav>
<router-outlet></router-outlet>

Answer 1

您需要按以下方式更改路線

const appRoutes: Routes = [
 {path : '' ,redirectTo: 'mainComponent', pathMatch: 'full'},
 { path: 'mainComponent', component: MainComponent },
 { path: 'dataComponent',      component: DataComponent },
];

提供鏈接的更好方法

<nav>
    <a [routerLink]="['/mainComponent']" routerLinkActive="active">Main</a>
    <a [routerLink]="['/dataComponent']" [queryParams]="{ param: "paramValue" } routerLinkActive="active">Data</a>
</nav>

要接收參數，您需要在組件構造函數中執行以下操作

constructor(private activatedRoute: ActivatedRoute){
    this.type = activatedRoute.snapshot.params['type'];
}