通过Angular2路由器

Question

我有一个组件，我选择一组图像对象。我想将这些选定的图像传递给我的新路径CreateAlbum。它嵌套的数据，不适合作为URL参数传递。

有没有简单的方法来实现这个目标？

这是我导航到路线的代码

  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

我希望这会奏效。尝试使用查询参数。

 <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#!#bidirectional-service只是选项。

Answer 2

有关详细示例，请参阅https://angular.io/guide/router。向下滚动到此代码段：

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

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

此外，如果您不想订阅，可以使用Route snapshot param，如下所示（只是它不会像observable那样继续更新，所以除非组件重新初始化，否则它赢了如果有的话，不会得到更新的值。因此，获取值的好地方是在ngOnInit事件处理程序中

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

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

Answer 4

您可以使用路由器传递数据，例如

{ path: 'form', component: FormComponent ,data :{data :'Test Data'} },

和您的组件

import { ActivatedRoute, Router } from '@angular/router';

export class FormComponent {
    sub: any;
    constructor(private route: ActivatedRoute) { }
    ngOnInit() {
        this.sub = this.route
            .data
            .subscribe(value => console.log(value));
    }
}

More info

但这可能不是首选方式you can use parent child communication or make a service common and share data between them。检查以下参考资料。

Parent child communication

Share data using service

Answer 5

Angular >= 7.2.0引入了在路由组件之间导航时传递数据的新方法。在路由器模块内的NavigationExtras界面中添加了一个新属性：state: any，您可以设置将以新状态显示的数据。

在组件中

export class ComponentA {
    constructor(private router: Router) {}

    goToComponentB(): void {
        // programmatically        
        this.router.navigate(['/b'], {state: {data: {...}}});
    }
}

在HTML中

<a routerLink="/b" [state]="{ data: {...}}">Go to B</a>

使用history.state.data

获取组件B中的数据

export class ComponentB {
    constructor() {
       console.log(history.state.data); // GET DATA
    }
}

感谢Ľudovít Hajzer在这里https://medium.com/ableneo/how-to-pass-data-between-routed-components-in-angular-2306308d8255阅读整个博客

Answer 6

this.router.navigate(['path', { flag: "1"}]);

Answer 7

from subprocess import Popen, PIPE
command = ['python3', '/home/gomathi/sample.py']
process = Popen(command, shell=False, stdout=PIPE, stdin=PIPE)
while True:
    line = process.stdout.readline() #variable_name_changed
    print(line)