我在angular2中设置了两个路由器链接。我想使用按钮点击切换链接

时间:2015-11-10 11:02:01

标签: typescript angular

我有以下代码。如果我点击一个按钮,我想跳转到上一页,即主页。我已经写了一个指向该按钮的路由器链接,当我点击浏览器重新加载时,它显示它无法获取数据。有什么我应该补充的吗?请有人帮助我,提前谢谢。

以下是链接http://plnkr.co/edit/aDhFeeeszwJAkBUvIMUo?p=preview

    import {bootstrap, bind, Component, View} from 'angular2/angular2'
import {RouteConfig, RouteParams, ROUTER_DIRECTIVES, APP_BASE_HREF, ROUTER_BINDINGS} from 'angular2/router'

@Component({
  selector: 'sup-cmp'
})
@View({
  template: `
    <div>
      <h2>Hello {{message}}!</h2>
      <button  [router-link]="['./HomeCmp']">click to jump</button>
    </div>

  `,
  directives: ROUTER_DIRECTIVES
})

class SupCmp {
  constructor(params: RouteParams) {
    this.message = params.get('name');
  }
}

@Component({
  selector: 'home-cmp'
})
@View({
  template: `
    <div>
      <h2>Welcome Home</h2>
    </div>
  `
})
class HomeCmp {}


@Component({
  selector: 'app-cmp'
})
@View({
  template: `
    <div>
      <h1>Hello {{message}}!</h1>
      <a [router-link]="['./HomeCmp']">home</a>
      <a [router-link]="['./HelloCmp', {name: 'brian'}]">hello</a>
      <hr>
      <router-outlet></router-outlet>
    </div>
  `,
  directives: ROUTER_DIRECTIVES
})
@RouteConfig([
  {path: '/', component: HomeCmp, as: 'HomeCmp'}
  {path: '/hello/:name', component: SupCmp, as: 'HelloCmp'}
])
export class App {
  message:string = 'world';
}

bootstrap(App, [
  ROUTER_BINDINGS,
  bind(APP_BASE_HREF).toValue(location.pathname)
]);

// In alpha-38:
//bootstrap(App, [routerBindings(App)]);

0 个答案:

没有答案