typescript Angular 2 Routes 在浏览浏览器 URL 时不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42809363/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 2 Routes not working while navigating through browser URL
提问by All ?? Vаи?тy
I have some problems with routes for an Angular project, mainly with the third level of child routes. The routes are working prefectly while navigating on the app. (routerLink) and the problem arise when accessing the URL through the browser URL.
我对 Angular 项目的路由有一些问题，主要是第三级子路由。在应用程序上导航时，路线工作正常。( routerLink) 以及通过浏览器 URL 访问 URL 时出现的问题。
My Angular version is 2.4.0
I am testing on dev server with ng serve.
我的 Angular 版本是 2.4.0
我正在使用ng serve.
For a project with the given structure,
对于具有给定结构的项目，
.
├── photos
├── posts
├── users
│ ├── detail
│ │ ├── address
│ │ ├── family
│ │ ├── information
│ │ └── phones
│ ├── friends
│ └── profile
└── videos
The following is the code,
以下是代码，
// 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[] = [];
and is registered as,
并注册为，
@NgModule({
declarations: [
// declarations
],
imports: [
AppRoutes
],
providers: [
appRoutingProviders
],
bootstrap: [AppComponent]
})
export class AppModule { }
So the Application works well with the RouterLink
因此该应用程序与 RouterLink 配合良好
[routerLink]="['/user', username, 'detail']
but when I navigate the browser <host>/user/myuser/detailit raise exception
但是当我浏览浏览器时<host>/user/myuser/detail它会引发异常
Uncaught (in promise): Error: Cannot find primary outlet to load 'DetailComponent'
Whats wrong? Thanks.
怎么了？谢谢。
NB: I have setup <router-outlet>and is working perfectly on routerLink and the problem arises when the navigate through full url in browser.
注意：我已经设置好<router-outlet>并且在 routerLink 上运行良好，当在浏览器中浏览完整 url 时会出现问题。
回答by YounesM
I'm supposing that when you're navigating from user/:username/to /user/:username/detailyou need your UserComponentto hide everything that's on his template and show the DetailComponent
我假设当您从 导航到 时user/:username/，/user/:username/detail您需要UserComponent隐藏他模板上的所有内容并显示DetailComponent
So to achieve that you'll need a component that will load its children component :
因此，要实现这一点，您将需要一个组件来加载其子组件：
parent.component.html
父组件.html
<router-outlet></router-outlet>
routes.ts
路由.ts
Now let's set the routes so that user/:username/will load in the parent component
现在让我们设置路由，以便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[] = [];
So, what is happening here is that when you navigate to user/:usernameParentComponentis loaded then UserComponentloaded in parent component's outlet (since the ''path correspond to user/:username)
所以，这里发生的事情是，当您导航到user/:usernameParentComponent加载然后UserComponent加载到父组件的出口（因为''路径对应于user/:username）
Here is a working example : Github
这是一个工作示例：Github
When you access user/myuserit will display : user works !
user/myuser/detailswill display : details works ! as you can see below (Without using a routerlink)
当你访问user/myuser它时会显示：用户工作！
user/myuser/details将显示：详细信息有效！如下所示（不使用路由器链接）
回答by user3522814
use <base href="/">inside into tag.
Note<base href="/">it should be top inside head tag.
<base href="/">在标签内使用。
请注意，<base href="/">它应该在 head 标签内的顶部。
<head>
<base href="/">
other css and jquery ...
</head>
Routing like
路由类似
const appRoutes: Routes = [
{
path: 'Admin',
component: AdminComponent,
children: [
{
path: 'CandidateInfo',
component: CandidateInfoComponent
},
{
path: 'RptCandidateInfo',
component: RptCandidateInfoComponent
},
{
path: 'RptCandidateInfoDT',
component: RptCandidateDTInfoComponent
}
]
},
];
Its working fine.
它的工作正常。
回答by Andrej Kikelj
Have you set the <base href="/">?
你有没有设置 <base href="/">?
What is your backend? In case a user first navigates to a full URL of the subpage of your application(e.g. www.mysite.com/users/john-doe) and your backend does not return the angular 2 bootstrapped page(index.html with the bootstrap scripts), then the angular router will never kick in, although I think this is not the issue in your case, since you are getting an error from angular.
你的后台是什么？如果用户首先导航到您的应用程序子页面的完整 URL（例如 www.mysite.com/users/john-doe）并且您的后端没有返回 angular 2 引导页面（带有引导脚本的 index.html） ，那么 angular 路由器将永远不会启动，尽管我认为这不是您的问题，因为您收到了来自 angular 的错误。
I have my .net core backend set to always return index.html for requests that are not static files, so it always properly loads the app and uses the angular routing.
我的 .net 核心后端设置为始终为非静态文件的请求返回 index.html，因此它始终正确加载应用程序并使用角度路由。
回答by Lalit Dogra
Use this code in html routerLink="/user" and please mention your path in routing.ts and when u click this routerlink it will jump to concerned link
在 html routerLink="/user" 中使用此代码，请在routing.ts 中提及您的路径，当您单击此路由器链接时，它将跳转到相关链接
