在浏览器URL中导航时，Angular 2路由不起作用

Question

我在Angular项目的路线中遇到一些问题，主要是子路线的第三级。在应用程序上浏览时，路线可以正常运行。（routerLink），并且在通过浏览器URL访问URL时出现问题。

我的Angular版本是2.4.0，
我正在使用进行测试ng serve。

对于具有给定结构的项目，

.
??? photos
??? posts
??? users
?   ??? detail
?   ?   ??? address
?   ?   ??? family
?   ?   ??? information
?   ?   ??? phones
?   ??? friends
?   ??? profile
??? videos

以下是代码，

// user routes
export const userRoutes : Routes = [
  {
    path: 'detail',
    component: DetailComponent
  },
  {
    path: 'friends',
    component: FriendsComponent
  },
  {
    path: 'profile',
    component: ProfileComponent
  }
]

//app routes
const appRoutes: Routes = [
  {
    path: '',
    component: HomeComponent
  },
  {
    path: 'photos',
    component: PhotosComponent
  },
  {
    path: 'posts',
    component: PostsComponent
  },
  {
    path: 'users',
    component: UserListComponent
  },
  {
    path: 'user/:username',
    component: UserComponent,
    children: userRoutes
  },
  {
    path: 'videos',
    component: VideosComponent
  }
]
export const AppRoutes = RouterModule.forRoot(appRoutes);
export const appRoutingProviders: any[] = [];

并注册为

@NgModule({
  declarations: [
    // declarations
  ],
  imports: [
    AppRoutes
  ],
  providers: [
    appRoutingProviders
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

因此，该应用程序可以与RouterLink一起很好地工作

[routerLink]="['/user', username, 'detail']

但是当我浏览浏览器时，<host>/user/myuser/detail它会引发异常

Uncaught (in promise): Error: Cannot find primary outlet to load 'DetailComponent'

怎么了？谢谢。

注意：我已经设置好，<router-outlet>并且在routerLink上运行正常，并且在浏览器中浏览完整URL时出现问题。

Answer 1

我想当您从导航至时user/:username/，/user/:username/detail您需要UserComponent隐藏其模板上的所有内容并显示DetailComponent

因此，要实现这一点，您将需要一个将加载其子组件的组件：

parent.component.html

<router-outlet></router-outlet>

route.ts

现在让我们设置路线，以便user/:username/将其加载到父组件中

// user routes
export const userRoutes : Routes = [
 {
    path: '',
    component: UserComponent // the '' path will load UserComponent
  },
  {
    path: 'detail',
    component: DetailComponent
  },
  {
    path: 'friends',
    component: FriendsComponent
  },
  {
    path: 'profile',
    component: ProfileComponent
  }
]

//app routes
const appRoutes: Routes = [
  {
    path: '',
    component: HomeComponent
  },
  {
    path: 'photos',
    component: PhotosComponent
  },
  {
    path: 'posts',
    component: PostsComponent
  },
  {
    path: 'users',
    component: UserListComponent
  },
  {
    path: 'user/:username',
    component: ParentComponent, //This component will load its children
    children: userRoutes
  },
  {
    path: 'videos',
    component: VideosComponent
  }
]
export const AppRoutes = RouterModule.forRoot(appRoutes);
export const appRoutingProviders: any[] = [];

因此，这里发生的是，当您导航到时，然后将user/:username ParentComponent其UserComponent加载到父组件的出口中（因为''路径对应于user/:username）

这是一个工作示例：Github

当您访问user/myuser它时将显示：用户作品！ user/myuser/details会显示：细节作品！如下所示（不使用routerlink）