angular2中的嵌套路由
Nested Routing in angular2
您好所有 Angular2 开发人员,
这是我面临的挑战,但不知道如何解决。
我的 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;
}
我已经在header.component中写好了header的所有视图,并在HTML中加载了。在 "header.component" 中,我正在加载 "left-menu.component"。在左边-menu.component,我有超链接要加载到"app.component"。
我收到的错误是 "No provider for the router"。
我继续基于 angular.io 示例,但无法解决它。
下面是我写的代码。
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;
}
左-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
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
import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from './components/app.component';
import { appRouterProviders } from './routes/app.routes';
bootstrap(AppComponent,[
appRouterProviders
]);
bootstrap(AppComponent);
谁能帮我 this.a
在你的 main.ts 中,你似乎不小心调用了 bootstrap 两次:
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!
删除第二个就可以了
您好所有 Angular2 开发人员,
这是我面临的挑战,但不知道如何解决。
我的 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;
}
我已经在header.component中写好了header的所有视图,并在HTML中加载了。在 "header.component" 中,我正在加载 "left-menu.component"。在左边-menu.component,我有超链接要加载到"app.component"。
我收到的错误是 "No provider for the router"。
我继续基于 angular.io 示例,但无法解决它。
下面是我写的代码。 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;
}
左-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
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
import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from './components/app.component';
import { appRouterProviders } from './routes/app.routes';
bootstrap(AppComponent,[
appRouterProviders
]);
bootstrap(AppComponent);
谁能帮我 this.a
在你的 main.ts 中,你似乎不小心调用了 bootstrap 两次:
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!
删除第二个就可以了