通过 Angular2 路由器传递数据

Question

有什么简单的方法可以实现这一点吗？

这是我导航到路线的代码

  public gotoCreateAlbum(): void {
    this.router.navigate([('/create-album')])
  }

@Input() selectedPhotos: IPhoto[];

这是我的路由模块

const routes: Routes = [
  { path: 'photos',  component: PhotosComponent},
  { path: 'photos/:filter', component: PhotosComponent},
  { path: 'create-album', component: CreateAlbumComponent}
];

基本上，我希望执行与CreateAlbum组件是当前组件的子组件相同的操作，在这种情况下，我将使用@Input（）

Answer 1

除非您希望用户操作地址栏中的查询字符串，否则请在发送数据之前和接收数据之后执行“atob”和“btoa”。只是一点点安全感

// before
this._router.navigate(["/welcome/" + atob(userName)]);

// after
ngOnInit() {
    this.userName = btoa(this.route.snapshot.params['userName']);
}

Answer 2

gotoHeroes(hero: Hero) {
  let heroId = hero ? hero.id : null;
  // Pass along the hero id if available
  // so that the HeroList component can select that hero.
  // Include a junk 'foo' property for fun.
  this.router.navigate(['/heroes', { id: heroId, foo: 'foo' }]);
}

要获取目标组件中“id”的值:

ngOnInit() {
  this.heroes$ = this.route.paramMap.pipe(
    switchMap((params: ParamMap) => {
      // (+) before `params.get()` turns the string into a number
      this.selectedId = +params.get('id');
      return this.service.getHeroes();
    })
  );
}

Answer 3

我希望这会起作用。尝试使用查询参数。

 <nav>
      <a [routerLink]="['/component1']">No param</a>
      <a [routerLink]="['/component2']" [queryParams]="{ page: 99 }">Go to Page 99</a>
 </nav>

或者

opencomponent2(pageNum) {
    this.router.navigate(['/component2'], { queryParams: { page: pageNum } });
  }

在子组件中:

constructor(
    private route: ActivatedRoute,
    private router: Router) {}

  ngOnInit() {
    this.sub = this.route
      .queryParams
      .subscribe(params => {
        // Defaults to 0 if no query param provided.
        this.page = +params['page'] || 0;
      });
  }

我在rangle.io网站上研究过这个。如果对你有用，试试这个。否则https://angular . io/docs/ts/latest/cookbook/component-communication . html #！#双向-服务是唯一选项。