typescript - Angular 2 中的 RouteData 可以将变量从父组件传递给路由组件吗?

标签 typescript angular angular2-routing

我想使用 RouteConfig 将一个变量从我的 AppComponent 传递到 Coursescomponent,但是路由配置中的“data”属性只能传递常量参数,它无法识别“this”。有办法做到这一点吗?

如果不是,将变量传递给路由组件的最佳做法是什么?

@Component({
    selector: 'app',
    template: `
    <router-outlet></router-outlet>
    `,

directives: [ROUTER_DIRECTIVES],
})

@RouteConfig([
    { path: '/courses'
      , name: 'Courses' 
      ,component: CoursesComponent
       ,data:{token:this.token}}  // this doesn't work -- cannot read property "token" of undefined

])

export class AppComponent  {
    token:string;
//I would change the token(string) in this component, and I want to pass this to the routed components

}

最佳答案

我通过在构造函数中定义动态路由实现了这一点。这是一个例子

import {Router,ROUTER_DIRECTIVES} from 'angular2/router';
import {Component} from 'angular2/core';

@Component({
  selector: "app",
  template: '<router-outlet></router-outlet>',
  directives: [ROUTER_DIRECTIVES]
})
export class AppCmp{
  public token:string;
  constructor(private _router:Router){
    var config = [];
    if(!this._router.registry.hasRoute("Courses",AppCmp))
      config.push({ path: '/courses', name: 'Courses',component: CoursesComponent,data:{token:this.token});

    this._router.config(config)
  }
}

关于typescript - Angular 2 中的 RouteData 可以将变量从父组件传递给路由组件吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36108771/

相关文章:

javascript - 使用 Angular 2 进行子路由

node.js - 调试在 Visual Studio Code 1.19.3 中不起作用

reactjs - 使用 TypeScript 在 useState React Hook 上设置类型

Angular:Observable 在使用管道和选项卡时改变行为

angular - 替换 rxjs6 中的 share() 函数

typescript - 使用 Electron 时,我应该如何为 Angular 2 配置基本 href?

javascript - 括号前括号中的强制转换/断言在 TypeScript 代码中意味着什么?

html - 具有 set Input() 任意类型的可重用组件是一个好的实践吗?

html - 如何在 Bootstrap 中更改按钮对齐方式(也使用 Angular 8)?

angular - 如何在angular2 RC5中获取路由参数