Angular2 - Class - LocationStrategy

Posted on   |   In

LocationStrategy` is responsible for representing and reading route state

  • from the browser’s URL. Angular provides two strategies:
  • {@link HashLocationStrategy} (default) and {@link PathLocationStrategy}.

改变根路径

 import {bootstrap} from 'angular2/platform/browser'
import {ROUTER_PROVIDERS,APP_BASE_HREF} from 'angular2/router';
import {AppRoute} from './AppRoute';
import {provide} from 'angular2/core';

bootstrap(AppRoute,[ROUTER_PROVIDERS, provide(APP_BASE_HREF, {useValue: '/my/app'})]);

看这个，很多路由相关的知识
https://auth0.com/blog/2016/01/25/angular-2-series-part-4-component-router-in-depth/

routerLink 可以这么写，直接跳到子路去

<li (click)="loopNav($event)"> <a [routerLink]="['ParentApp','NumberItem']">Double</a></li>

因为这里。。。。
Aux的路径显示也是因为这里

 // default instructions override these
toLinkUrl(): string {
  return this.urlPath + this._stringifyAux() +
         (isPresent(this.child) ? this.child._toLinkUrl() : '');
}

找到另外一种 AuxRoute 的写法

 @Component({
    selector: 'basic-routing',
    template: `<a [router-link]="['/Home']">Home</a>
              <a [router-link]="['/ProductDetail']">Product Details</a>
              <router-outlet></router-outlet>
              <router-outlet name="chat"></router-outlet>
              <a href="./#/(chat)">Chat</a>`,
    directives: [ ROUTER_DIRECTIVES]
})
@RouteConfig([
    {path: '/',        component: HomeComponent, as: 'Home'},
    {path: '/product', component: ProductDetailComponent, as: 'ProductDetail'  },
    new AuxRoute({path: '/chat', component: ChatComponent, as: 'Chat'})
])
class RootComponent{}

bootstrap(RootComponent, [ROUTER_PROVIDERS, provide(LocationStrategy, {useClass: HashLocationStrategy})]);

这是群主的写法

 @Component({
    selector: 'basic-routing',
    template: `<a [router-link]="['/Home']">Home</a>
              <a [router-link]="['/ProductDetail']">Product Details</a>
              <router-outlet></router-outlet>
              <router-outlet name="chat"></router-outlet>
               <a [router-link]="['./Home', ['Chat']]">Chat</a>`,
    directives: [ ROUTER_DIRECTIVES]
})
@RouteConfig([
    {path: '/',        component: HomeComponent, as: 'Home'},
    {path: '/product', component: ProductDetailComponent, as: 'ProductDetail'  },
    {aux: '/chat', component: ChatComponent, as: 'Chat'}
])
class RootComponent{}

bootstrap(RootComponent, [ROUTER_PROVIDERS, provide(LocationStrategy, {useClass: HashLocationStrategy})]);