如何将数据传递给angular 2路由器

时间:2017-03-29 07:53:54

标签: angular angular2-routing

我需要将数据传递到角度路由器插座。可以使用参数或可选参数(查询参数)来完成。但我的问题是除了使用参数传递之外还有其他方法将数据传递到路由器插座。什么是实现这一目标的更好方法。

1 个答案:

答案 0 :(得分:0)

(1)您可以使用以下data属性:

{path: 'user/:id', component: UserDetailComponent , data: [{userName: 'testname'}]}

并在Component中使用:

export class UserDetailComponent {
  userId : string;
  userName: string;

  constructor(route: ActivatedRoute) {
    this.userId = route.snapshot.params['id'];     
    this.userName = route.snapshot.data[0]['userName'];
  }
}

(2)或者您可以创建跨数据共享的服务。喜欢:

@Injectable()
export class UserService{
private userData: IUserData;
  constructor(){}
  getUserData() : IUserData[] {
    return this.userData;
  }
setUserData(data) {
    this.userData = data;
  }
}

此外,将服务注入所需的组件:

constructor(private userService: UserService)

使用localStorage来保存数据。通过从'angular-2-local-storage'导入import {LocalStorageModule};