我在Angular中遵循
this路由教程,它只是不起作用.当我使用’comp’选择器来放置它的HTML代码时,它可以工作,但当我尝试使用router-outlet路由它时,它只显示index.html的标题.
我有以下内容:
main.ts:
import * as ng from 'angular2/angular2'; import {Comp} from './comp'; @ng.Component({ selector: 'my-app' }) @ng.View({ directives: [ng.formDirectives,ng.RouterOutlet],template: ` <nav> <ul> <li>Start</li> <li>About</li> <li>Contact</li> </ul> </nav> <main> <router-outlet></router-outlet> </main> ` }) @ng.RouteConfig([{ path: '/',component: Comp }]) class AppComponent { } ng.bootstrap(AppComponent,[ng.routerInjectables]);
comp.ts:
import * as ng2 from 'angular2/angular2'; @ng2.Component({ selector: 'comp' }) @ng2.View({ template: ` <h1>hi<h1> ` }) export class Comp { constructor() { } }
index.html的:
<!DOCTYPE html> <html> <head> <Meta charset="utf-8" /> <title>Test3</title> <script src="lib/traceur/traceur.js"></script> <script src="lib/system.js/dist/system.js"></script> <script src="lib/angular2-build/angular2.js"></script> <script src="lib/angular2-build/router.dev.js"></script> <script> System.config({ packages: { 'js': { defaultExtension: 'js' } } }); System.import('/js/main'); </script> </head> <body> <h1>Hello There</h1> <my-app></my-app> </body> </html>
在angular@2.0.0-alpha.41中引入了重大变化
> routerInjectables已重命名为ROUTER_BINDINGS
>然后将ROUTER_BINDINGS重命名为ROUTER_PROVIDERS
旁白:最近发生了很多重大变化,因此几乎所有在线示例都不可靠.
使用ROUTER_PROVIDERS
这包括:
> RouteRegistry – 已定义路线的注册表
> LocationStrategy = PathLocationStragety – 按路径匹配路线
这基本上是使用默认设置引导路由器的快捷方式.
例如:
@Component ({ ... }) @View ({ ... }) @RouteConfig ({ ... }) class App {} bootstrap(App,[ ROUTER_PROVIDERS ]);
资料来源: