Angular 2 Plunker 中没有 RouterOutletMap 的提供者
Angular 2 No provider for RouterOutletMap in Plunker
我需要有关在 Plunker 中设置 Angular 2 路由的帮助。
继续收到没有提供 RouterOutletMap 错误的信息。
笨蛋:https://plnkr.co/edit/ZfsaKj0r4mGztxbQ43UZ?p=preview
main.ts
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app';
import { appRouterProviders } from './app.routes';
platformBrowserDynamic().bootstrapModule(AppModule, [appRouterProviders])
app.ts
import {Component, NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import { ROUTER_DIRECTIVES } from '@angular/router';
//import { ROUTER_PROVIDERS, Routes, ROUTER_DIRECTIVES, Router } from '@angular/router';
@Component({
selector: 'my-app',
template: `
<div>
<router-outlet></router-outlet>
</div>
`,
directives: [ROUTER_DIRECTIVES],
//providers: [ROUTER_PROVIDERS]
})
export class App {
constructor() {}
}
@NgModule({
imports: [ BrowserModule ],
declarations: [ App ],
bootstrap: [ App ]
})
export class AppModule {}
app.routes.ts
import { provideRouter, RouterConfig } from '@angular/router';
import { TopicsComponent } from './topics.component';
import { PageNotFoundComponent } from './page-not-found.component';
const routes: RouterConfig = [
{
path: '',
component: TopicsComponent
},
{
path: '**',
component: PageNotFoundComponent
},
];
export const appRouterProviders = [
provideRouter(routes)
];
topics.component.ts
import { Component} from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
//import { ROUTER_PROVIDERS, Routes, ROUTER_DIRECTIVES, Router } from '@angular/router';
@Component({
selector: 'topics',
templateUrl: `
<h1>{{title}}</h1>
<div *ngFor="let topic of topics">
<a [routerLink]="'/' + topic.title" routerLinkActive="active">{{ topic.title }}</a>
</div>
`,
directives: [ROUTER_DIRECTIVES],
//providers: [ROUTER_PROVIDERS]
})
export class TopicsComponent {
title = 'Welcome to the topics component!';
topics: [
{title: 'angular2'},
{title: 'react'},
{title: 'angular1'}
];
}
您混入了 RC4 和 RC5 ..保重!
在此处查看文档:https://angular.io/docs/ts/latest/guide/router.html
还有一个工作的 plunker:http://plnkr.co/edit/nRoudQv5Y52wH8OBRALO?p=preview
// there's too much code to post here! :)
// this is just to fake some code.. ignore it! ;)
我假设您正在使用 RC5,如果是这样,您应该使用新的 RouterModule
参考文献:https://angular.io/docs/ts/latest/tutorial/toh-pt5.html
我需要有关在 Plunker 中设置 Angular 2 路由的帮助。 继续收到没有提供 RouterOutletMap 错误的信息。
笨蛋:https://plnkr.co/edit/ZfsaKj0r4mGztxbQ43UZ?p=preview
main.ts
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app';
import { appRouterProviders } from './app.routes';
platformBrowserDynamic().bootstrapModule(AppModule, [appRouterProviders])
app.ts
import {Component, NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import { ROUTER_DIRECTIVES } from '@angular/router';
//import { ROUTER_PROVIDERS, Routes, ROUTER_DIRECTIVES, Router } from '@angular/router';
@Component({
selector: 'my-app',
template: `
<div>
<router-outlet></router-outlet>
</div>
`,
directives: [ROUTER_DIRECTIVES],
//providers: [ROUTER_PROVIDERS]
})
export class App {
constructor() {}
}
@NgModule({
imports: [ BrowserModule ],
declarations: [ App ],
bootstrap: [ App ]
})
export class AppModule {}
app.routes.ts
import { provideRouter, RouterConfig } from '@angular/router';
import { TopicsComponent } from './topics.component';
import { PageNotFoundComponent } from './page-not-found.component';
const routes: RouterConfig = [
{
path: '',
component: TopicsComponent
},
{
path: '**',
component: PageNotFoundComponent
},
];
export const appRouterProviders = [
provideRouter(routes)
];
topics.component.ts
import { Component} from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
//import { ROUTER_PROVIDERS, Routes, ROUTER_DIRECTIVES, Router } from '@angular/router';
@Component({
selector: 'topics',
templateUrl: `
<h1>{{title}}</h1>
<div *ngFor="let topic of topics">
<a [routerLink]="'/' + topic.title" routerLinkActive="active">{{ topic.title }}</a>
</div>
`,
directives: [ROUTER_DIRECTIVES],
//providers: [ROUTER_PROVIDERS]
})
export class TopicsComponent {
title = 'Welcome to the topics component!';
topics: [
{title: 'angular2'},
{title: 'react'},
{title: 'angular1'}
];
}
您混入了 RC4 和 RC5 ..保重!
在此处查看文档:https://angular.io/docs/ts/latest/guide/router.html
还有一个工作的 plunker:http://plnkr.co/edit/nRoudQv5Y52wH8OBRALO?p=preview
// there's too much code to post here! :)
// this is just to fake some code.. ignore it! ;)
我假设您正在使用 RC5,如果是这样,您应该使用新的 RouterModule
参考文献:https://angular.io/docs/ts/latest/tutorial/toh-pt5.html