Question

我想显示乘法表。我正在使用2个组件：

要获取开始和结束编号以显示表格的Homecomponent
显示表格的xxx组件

当我单击提交按钮时，我想在“表格”路线组件中显示输出。

Answer 1

尝试

html

<button type="button" (click)="check()"></button>

TS

  check(){
    let data = {
      id: id, // custom values here
    };
    this._router.navigate([ 'custom-url' ], { queryParams:data });
}

Answer 2

要将数据从一个组件传递到另一个组件，可以使用查询参数。

在家庭组件中，提交表单后-导航至表格路由并传递查询参数：

onSubmit(): void {
  this.router.navigate(['/table'], { 
    queryParams: { start: '2', end: '9' }
  });
}

在xxx组件（例如表格组件）中，读取查询参数：

ngOnInit(): void {
  this.activatedRoute.queryParamMap.subscribe(params => {
    // Get parameters
    this.start = params.get('start');
    this.end = params.get('end');
  });
}

更改路线并将数据传递到另一个组件

2 个答案: