Angular2 Component Router 基本问题
Angular2 Component Router basic issue
开始学习 angular2 beta 组件路由。到目前为止我已经这样做了。
http://plnkr.co/edit/4YWWGhuBWd2CoWpC3GeY?p=preview
我已经复制了以下所需的 CDN。请看这里
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.0/angular2-polyfills.js"></script>
<script src="https://rawgithub.com/systemjs/systemjs/0.19.6/dist/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.0/Rx.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.0/angular2.dev.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.0/router.dev.js"></script>
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: `
<h1>Component Router</h1>
<nav>
<a [routerLink]="['ComponentOne']">One</a><hr/>
<a [routerLink]="['ComponentTwo']">Two</a>
</nav>
<router-outlet></router-outlet>
`,
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/cone
import {Component,View} from 'angular2/core';
@Component({
template: `
<h1>first Component</h1>
`
})
export class ComponentOne{
constructor(){
console.log("first component being called");
}
}
src/ctwo
import {Component,View} from 'angular2/core';
@Component({
template: `
<h1>Second Component</h1>
`
})
export class ComponentTwo{
constructor(){
console.log("Second component being called");
}
}
请检查您的开发控制台。它给出了一个错误
EXCEPTION: Error during instantiation of LocationStrategy! (RouterLink -> Router -> Location -> LocationStrategy).BrowserDomAdapter.logError @ angular2.dev.js:23514
angular2.dev.js:23514 ORIGINAL EXCEPTION: No base href set. Please provide a value for the APP_BASE_HREF token or add a base element to the document.
此外,它不会将我重定向到目的地。
我尝试添加 < base href="/" > 但它允许给出错误。
我希望链接正常工作。
将 <base href="/">
添加到 <head>
元素或将 APP_BASE_HREF
添加到 bootstrap
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
开始学习 angular2 beta 组件路由。到目前为止我已经这样做了。
http://plnkr.co/edit/4YWWGhuBWd2CoWpC3GeY?p=preview
我已经复制了以下所需的 CDN。请看这里
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.0/angular2-polyfills.js"></script>
<script src="https://rawgithub.com/systemjs/systemjs/0.19.6/dist/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.0/Rx.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.0/angular2.dev.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.0/router.dev.js"></script>
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: `
<h1>Component Router</h1>
<nav>
<a [routerLink]="['ComponentOne']">One</a><hr/>
<a [routerLink]="['ComponentTwo']">Two</a>
</nav>
<router-outlet></router-outlet>
`,
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/cone
import {Component,View} from 'angular2/core';
@Component({
template: `
<h1>first Component</h1>
`
})
export class ComponentOne{
constructor(){
console.log("first component being called");
}
}
src/ctwo
import {Component,View} from 'angular2/core';
@Component({
template: `
<h1>Second Component</h1>
`
})
export class ComponentTwo{
constructor(){
console.log("Second component being called");
}
}
请检查您的开发控制台。它给出了一个错误
EXCEPTION: Error during instantiation of LocationStrategy! (RouterLink -> Router -> Location -> LocationStrategy).BrowserDomAdapter.logError @ angular2.dev.js:23514 angular2.dev.js:23514 ORIGINAL EXCEPTION: No base href set. Please provide a value for the APP_BASE_HREF token or add a base element to the document.
此外,它不会将我重定向到目的地。 我尝试添加 < base href="/" > 但它允许给出错误。
我希望链接正常工作。
将 <base href="/">
添加到 <head>
元素或将 APP_BASE_HREF
添加到 bootstrap
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