[英]Nested Routing in angular2
Hello All Angular2 Developers, 您好所有Angular2开发人员,
Here is a challenge I am facing and not knowing how to resolve it. 这是我面临的挑战,不知道如何解决。
I have my app.component.ts file as follows: 我的app.component.ts文件如下:
import { Component } from '@angular/core';
import {ROUTER_DIRECTIVES} from '@angular/router';
import { LeftMenuComponent } from './left-menu.component';
import {HeaderComponent} from './header.component';
import {TotalContainer} from './container-total.component';
@Component({
selector: 'my-app',
template: `
<myheader [display]="display"></myheader>
<router-outlet></router-outlet>
`,
directives:[HeaderComponent,TotalContainer,ROUTER_DIRECTIVES]
})
export class AppComponent {
display = true;
}
I have written all the view of the header in header.component and loaded in HTML. 我已经在header.component中编写了标头的所有视图,并以HTML加载。 In the "header.component", I am loading the "left-menu.component". 在“ header.component”中,我正在加载“ left-menu.component”。 In the left-menu.component, I am having hyperlinks which are to be loaded in the "app.component". 在左侧菜单组件中,我具有要在“ app.component”中加载的超链接。
The error that I am getting is that there is "No provider for the router". 我收到的错误是没有“路由器的提供程序”。
I continued basing upon the angular.io sample but could not solve it. 我继续基于angular.io示例,但无法解决。
Here is how I wrote the code. 这是我编写代码的方式。 header.component.ts header.component.ts
import {Component, Input} from '@angular/core';
import {ROUTER_DIRECTIVES} from '@angular/router';
import {LeftMenuComponent} from './left-menu.component';
@Component({
selector:'myheader',
template:`
<nav class="navbar navbar-default">
<div>
....
</div>
</nav>
<left-menu [class.disp]="display"></left-menu>
`,
directives:[ROUTER_DIRECTIVES, LeftMenuComponent]
})
export class HeaderComponent{
@Input() display;
}
left-menu.component.ts 左menu.component.ts
import {Component} from '@angular/core';
import {ROUTER_DIRECTIVES} from '@angular/router';
import {KeyEventsPlugin} from '@angular/platform-browser/src/dom/events/key_events';
@Component({
selector:'left-menu',
template:`
<ul class="list-group">
<li class="list-group-item">
<span class="glyphicon glyphicon-share-alt"></span>
<span class="badge">14</span>
<a [routerLink]="['/followups']" routerLinkActive="active-link">Follow Ups</a>
</li>
</ul>
`,
directives:[ROUTER_DIRECTIVES]
})
export class LeftMenuComponent{
}
app.routes.ts app.routes.ts
import { provideRouter, RouterConfig } from '@angular/router';
import {FollowUpsComponent} from '../components/followups.component';
import {TotalContainer} from '../components/container-total.component';
const routes: RouterConfig = [
{
path:'total-container',
component:TotalContainer
},
{
path:'followups',
component: FollowUpsComponent,
},
{
path:'',
redirectTo:'/total-container',
pathMatch:'full'
},
{
path:'**',
redirectTo:'/total-container'
}
];
export const appRouterProviders = [
provideRouter(routes)
];
main.ts main.ts
import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from './components/app.component';
import { appRouterProviders } from './routes/app.routes';
bootstrap(AppComponent,[
appRouterProviders
]);
bootstrap(AppComponent);
Can anyone help me with this.a 谁能帮我这个忙。
In your main.ts it looks like you call bootstrap twice accidentally: 在main.ts中,您好像不小心两次调用了引导程序:
import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from './components/app.component';
import { appRouterProviders } from './routes/app.routes';
bootstrap(AppComponent,[
appRouterProviders
]);
bootstrap(AppComponent); <-----delete this!
Delete the second one and you should be good to go 删除第二个就可以了
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.