4

我对 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 时出现问题。

4

4 回答 4

7

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

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

父组件.html

<router-outlet></router-outlet>

路线.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将显示：细节有效！如下所示（不使用路由器链接）

在此处输入图像描述

于 2017-03-17T13:48:10.287 回答
0

你有没有设置<base href="/">?

你的后端是什么？如果用户首先导航到您的应用程序子页面的完整 URL（例如 www.mysite.com/users/john-doe）并且您的后端不返回 angular 2 引导页面（带有引导脚本的 index.html） ，那么角度路由器将永远不会启动，尽管我认为这不是你的问题，因为你从 angular 得到一个错误。

我将 .net 核心后端设置为始终为非静态文件的请求返回 index.html，因此它始终正确加载应用程序并使用角度路由。

于 2017-03-15T13:58:37.430 回答
0

<base href="/">在标签内 使用。请注意 <base href="/"> ，它应该在 head 标签内的顶部。

<head>
  <base href="/">
 other css and jquery ...
</head>

路由喜欢

const appRoutes: Routes = [
    {
        path: 'Admin',
        component: AdminComponent,
        children: [

            {
                path: 'CandidateInfo',
                component: CandidateInfoComponent
            },
            {
                path: 'RptCandidateInfo',
                component: RptCandidateInfoComponent
            },
            {
                path: 'RptCandidateInfoDT',
                component: RptCandidateDTInfoComponent
            }
        ]
    },
];

它工作正常。

于 2018-08-23T14:06:19.103 回答
-3

在 html routerLink="/user" 中使用此代码，请在 routing.ts 中提及您的路径，当您单击此路由器链接时，它将跳转到相关链接

于 2017-03-15T12:31:22.130 回答