Question

我目前正在处理一个特定网址上打开的角度应用：

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

现在我想实现角度路由。所以我有两条路线：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'];
}

具有特定URL的Angular 2路由

1 个答案: