如何使用参数从一个组件传递到另一个组件?&&URL的运营商

Question

如何将参数从一个组件传递到另一个组件？目前，我正在使用 ActivatedRoute 。

component1.ts

this.router.navigate(['/rate-list', 1]);

在app.module.ts

中

{ path: 'rate-list/:a', pathMatch: 'full', component: 
RateListComponent },

component2.ts

ngOnInit() {
this.parameter.sub = this.route.params.subscribe(params => {
  this.parameter.a = params['a'];
  console.log(this.parameter.a);
});
}

这很好。这将创建URL为 http：//localhost：4200/rate-list/1 ，但我想创建 http：//localhost：4200/rate-list：a = 1 这种URL。是否可以创建这样的URL。如果是，那么如何？

Answer 1

是的，这是可以实现的，为此，您需要在component1中使用 NavigationExtras如下：

  let navigationExtras: NavigationExtras = {
        queryParams: {
            a: 1               
        },
    };
    this.router.navigate(['./rate-list'], navigationExtras);

和组件2进行以下更改：

public sub: Observable<string>;
public a : string;    
ngOnInit() {
            this.sub = this.route.queryParamMap
            .map((params) => params.get('a'));
            this.sub.subscribe((val) => this.a = val));
            console.log(this.a);
}

最后，您无需在路由IE中添加任何参数：

{ path: 'rate-list', pathMatch: 'full', component: RateListComponent },

有关更多信息，请阅读此处

Answer 2

在app.module.ts

中

{ path: 'rate-list', pathMatch: 'full', component: RateListComponent }

component2.ts

ngOnInit() {
    this.parameter.sub = this.route.queryParams.subscribe(params => {
        this.parameter.a = params.a;
        console.log(this.parameter.a);
    });
}  

查看https://alligator.io/angular/query-parameters/有关更多详细信息