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);
});
}

这工作得非常好。这是以 http://localhost:4200/rate-list/1 创建网址，但我想创建 http://localhost:4200/rate-list?a=1 ，这种网址。是否有可能创建这样的网址。如果是，那怎么办？

Answer 1

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

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

在component2中进行以下更改：

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);
}

最后，您不需要在路由中添加任何参数，即：

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

有关详细信息，请参阅here

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/了解更多详情

如何使用？将参数从一个组件传递到另一个组件？和＆amp;网址中的运营商

2 个答案: