开始学习angular2 beta组件路由.到目前为止我已经这样做了.
http://plnkr.co/edit/4YWWGhuBWd2CoWpC3GeY?p=preview
我复制了以下必需的CDN.请看看这里.
SRC/boot.ts
import {Component} from 'angular2/core'; import {ROUTER_PROVIDERS,RouteConfig, ROUTER_DIRECTIVES,LocationStrategy} from 'angular2/router'; import {bootstrap} from 'angular2/platform/browser'; import{ComponentOne} from 'src/cone'; import{ComponentTwo} from 'src/ctwo'; @Component({ selector: 'my-app', template: `Component Router
`, directives: [ROUTER_DIRECTIVES] }) @RouteConfig([ {path:'/component-one', name: 'ComponentOne', component: ComponentOne}, {path:'/component-two', name: 'ComponentTwo', component: ComponentTwo} ]) export class AppComponent { } bootstrap(AppComponent, [ ROUTER_PROVIDERS ]);
SRC /锥
import {Component,View} from 'angular2/core'; @Component({ template: `first Component
` }) export class ComponentOne{ constructor(){ console.log("first component being called"); } }
SRC/CTWO
import {Component,View} from 'angular2/core'; @Component({ template: `Second Component
` }) export class ComponentTwo{ constructor(){ console.log("Second component being called"); } }
请检查您的开发控制台.它给出了一个错误
EXCEPTION:在实现LocationStrategy期间出错!(RouterLink - >路由器 - >位置 - > LocationStrategy).BrowserDomAdapter.logError @ angular2.dev.js:23514个angular2.dev.js:23514原始异常:无基本href集.请提供APP_BASE_HREF标记的值或向文档添加基本元素.
此外,它不会将我重定向到目的地.我试图添加
我希望链接正常工作.
无论是添加
到元素或添加
APP_BASE_HREF
到引导
bootstrap(AppComponent, [ ROUTER_PROVIDERS, // usually provide(APP_BASE_HREF, {useValue: '/'}) // for Plunker // bind(APP_BASE_HREF).toValue(location.pathname) ]);
答案由Nyks编辑:
在我的plunker中,我更新了以下部件,
import {Component,bind} from 'angular2/core'; import {ROUTER_PROVIDERS,RouteConfig, ROUTER_DIRECTIVES,APP_BASE_HREF,LocationStrategy,RouteParams,ROUTER_BINDINGS} from 'angular2/router'; export class AppComponent { } bootstrap(AppComponent, [ ROUTER_PROVIDERS,bind(APP_BASE_HREF).toValue(location.pathname) ]);
最终答案:http://plnkr.co/edit/4YWWGhuBWd2CoWpC3GeY?p =preview
另见http://plnkr.co/edit/iRUP8B5OUbxCWQ3AcIDm?p=info
以及angular.io 的ROUTING&NAVIGATION开发人员指南