[英]child Routing in angular2 getting error
My Page Layout look like this one 我的页面布局看起来像这样
-----------------------------------------------------
HEADER MENU --> Page1 <Page2>
-----------------------------------------------------
Page1 Child1 |
Page1 Child2 | MAIN CONTENT
Page1 Child2 |
----------------------------------------------------
FOOTER
----------------------------------------------------
if user click on Page1 i want to Refresh the Menus on the Left to list children for Page1, if i click Page 2 than i want to refresh the list of menu and display childrens of Pages 2 如果用户点击Page1我想刷新左边的菜单列出Page1的子项,如果我点击第2页比我要刷新菜单列表并显示第2页的子项
This is how my router look currently, but i am getting the error 这是我的路由器当前的样子,但我收到了错误
core.umd.js:3070 EXCEPTION: Uncaught (in promise): Error: Cannot match any routes. URL Segment: ''
Error: Cannot match any routes. 错误:无法匹配任何路由。 URL Segment: '' at ApplyRedirects.noMatchError
URL Segment:''在ApplyRedirects.noMatchError
index.html 的index.html
index.html <div class="container"> <div class="row"> </div> <div class="row"> <div class="col-md-2"><router-outlet></router-outlet></div> <div class="col-md-10"><router-outlet name="main"><h2>Main Content Here</h2></router-outlet></div> </div> </div>
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { Page1Component } from './Page1/Page1.component';
import { Page1Child1Component } from './Page1/Page1Child1/Page1Child1.component';
import { Page2Component } from './Page2/Page2.component';
import { RouterModule } from '@angular/router';
@NgModule({
imports: [BrowserModule,
RouterModule.forRoot([
{ path: '', redirectTo: 'Page1', pathMatch: 'full' },
{
path: 'Page1', component: Page1Component,
children: [
{ path: '', redirectTo: 'Page1Child1', pathMatch: 'full' },
{ path: 'Page1Child1', component: Page1Child1Component }
]
},
{ path: 'Page2', component: Page2Component }
])
],
declarations: [AppComponent, Page1Component, Page2Component, Page1Child1Component],
bootstrap: [AppComponent]
})
export class AppModule { }
screenshot the UI looks as expected but there is error in the console window 截图UI看起来如预期,但控制台窗口中有错误
core.umd.js:3070 EXCEPTION: Uncaught (in promise): Error: Cannot find primary outlet to load 'Page1Child1Component'
Error: Cannot find primary outlet to load 'Page1Child1Component'
at getOutlet
Page1.component Page1.component
import { Component } from '@angular/core';
@Component({
selector: 'Page1',
template: `<h1>This is from Page1 </h1>
<ul>
<li *ngFor="let item of links; let i = index">
<a [routerLink]="['Page1Child1']" routerLinkActive="active" outlet:"main">{{item}}</a>
</li>
</ul>
`
})
export class Page1Component {
links: any[] = [
'Page1 Child1',
'Page1 Child2'
];
}
Now as soon as i update the Pag1Component to use named outlet it throws parsing error. 现在,只要我更新Pag1Component以使用命名出口,它就会抛出解析错误。
{{item}} {{项目}}
This just blows out the whole page and nothing is displayed, console window throws the parsing error 这只是吹出整个页面而没有显示任何内容,控制台窗口会抛出解析错误
Error: (SystemJS) Template parse errors:(…)(anonymous function) @ (index):20ZoneDelegate.invoke @ zone.js:232Zone.run @ zone.js:114(anonymous function) @ zone.js:502ZoneDelegate.invokeTask @ zone.js:265Zone.runTask @ zone.js:154drainMicroTaskQueue @ zone.js:401ZoneTask.invoke @ zone.js:339 错误:(SystemJS)模板解析错误:(...)(匿名函数)@(索引):20ZoneDelegate.invoke @ zone.js:232Zone.run @ zone.js:114(匿名函数)@ zone.js:502ZoneDelegate.invokeTask @ zone.js:265Zone.runTask @ zone.js:154drainMicroTaskQueue @ zone.js:401ZoneTask.invoke @ zone.js:339
Is there a better way of doing this 有没有更好的方法来做到这一点
Because there's no root path in the children. 因为孩子们没有根路径。 When the
Page1
path first loads, it has a router outlet where it tries to load child routes, but with Page1
there is a route configured with ''
. 当
Page1
路径首次加载时,它有一个路由器插座,它尝试加载子路由,但是Page1
有一个配置了''
的路由。 This would be required when you go to the Page1
url. 当您转到
Page1
网址时,这将是必需的。 If you went to Page1/Page1Child1
, it knows the component, but Page1
(which would need to map to ''
) doesn't exist 如果你去了
Page1/Page1Child1
,它知道组件,但是Page1
(需要映射到''
)不存在
So just add a redirect to the default child route 因此,只需将重定向添加到默认子路由即可
children: [
{ path: '', redirectTo: 'Page1Child', pathMatch: 'full' }
{ path: 'Page1Child1', component: Page1Child1Component}
]
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.