Angular 2路线在浏览器浏览器时无法正常工作

我对Angular项目的路线有些问题，主要是第三级子路线。这些路线在应用程序导航时正在工作。（routerLink），并通过浏览器URL访问URL时出现问题。Angular 2路线在浏览器浏览器时无法正常工作

我的角度版本是2.4.0
我在dev服务器上测试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上运行完美，并且在浏览器中浏览完整网址时出现问题。

来源

2017-03-15 Marty

你'中添加的'<路由器出口>根分量模板？如果没有将它放入你的'AppComponent'模板中，HTML将加载 –

我在应用程序组件上有多个'router-outlet'，一个在用户组件上，另一个在详细组件 – Marty

我假设当你从user/:username/导航到/user/:username/detail您需要UserComponent隐藏的一切，是对他的模板，并显示DetailComponent

所以要做到这一点，你需要的组件，可以加载其子组件：

parent.component.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/:usernameParentComponent加载然后UserComponent在父组件的出口装（因为''路径对应user/:username）

这里是一个工作示例：Github

当您访问user/myuser时，它将显示：user works！ user/myuser/details将显示：细节的作品！你可以看到下面（如果不使用routerlink）

来源

2017-03-17 13:48:10 YounesM

-3

使用此代码的HTML routerLink =“/ user”和请注明您的路径routing.ts和当u点击这个routerlink将跳转到有关链接

来源

2017-03-15 12:31:22

上，主文件使用下面的代码以及 –

它与routerLink配合良好，问题出在浏览器URL上。 **这与routerLink无关** – Marty

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

什么你的后端？如果用户第一次导航到应用程序子页面的完整URL（例如www.mysite.com/users/john-doe），并且后端未返回角度2引导页面（index.html与引导脚本），那么角度路由器将永远不会踢，虽然我认为这不是你的情况的问题，因为你从角度得到一个错误。

我有我的.net核心后端设置为总是返回index.html请求不是静态文件，所以它总是正确加载应用程序，并使用角路由。

来源

2017-03-15 13:58:37

我已经设置了'base href'（它是一个角度cli项目）。服务器是具有'ng serve'的本地开发服务器。 – Marty

Angular 2路线在浏览器浏览器时无法正常工作

回答

相关问题