路线间的角度传递数据

Question

我在角度4中使用路由时遇到了一点问题。你知道，当我尝试使用navige（'root'，data）将数据从一个组件传递到另一个组件时，我刚刚收到了[对象对象]，[对象对象]，[对象对象]。

组成部分

export class FillRequestComponent implements OnInit {

  constructor(private route: Router, private dataRoute: ActivatedRoute) { }

  ngOnInit() {
    const key: Products = this.dataRoute.snapshot.params['objectProducts'];
    console.log(key);
  }

界面

export interface Products {

  color: string,
  question: string,
  surname: string,
  icon: string,
  selected: boolean,
  transparent: boolean
}

发送方法

const data = {
      category: this.optionSelected,
      objectProducts: this.optionSelected === 'CREDIT' ? this.productCreditList :
        this.productAccountsList
    };

    this.route.navigate(['/requests/fill', data]);

Answer 1

您无法在参数中传递数据列表

所以你需要转换为字符串对象的列表

navigate('root',   JSON.stringify(data))

然后一边解析一边得到这个

const key: Products =JSON.parse(this.dataRoute.snapshot.params['objectProducts']);

Answer 2

当你通过一个对象作为路由参数,c

const obj = {};
console.log(obj.toString());

Answer 3

在当前版本现在可以在< c

角7.2引入了状态路由到<代码> Naviga

可以强制设置状态：

this.router.navigate(['example'], { 
  state: { example: 'data' } 
});

或者声明性地:

<a routerLink="/example" [state]="{ example: 'data' }">
  Hello World
</a>

并使用以下命令读入顶级组件:

this.router.getCurrentNavigation().extras.state;

或在子组件内使用：

window.history.state

添加了在StackBlitz上使用它的工作示例