如何将参数从一个组件传递到另一个组件，使用 ? 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 but I want to create http://localhost:4200/rate-list?a=1，这种 url。是否可以创建这样一个url。如果是，那又如何？

Answer 1

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

Answer 2

是的，这是可以实现的，为此，您需要在 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);
}

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

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

有关详细信息，请阅读 here

如何将参数从一个组件传递到另一个组件，使用 ? url 中的和 & 运算符

How to pass parameters from one component to another, using ? and & operators in url

typescript

angular2-routing

angular