web-dev-qa-db-ja.com

Angularルート間でデータを渡す

angular 4.でルートを使用する際に少し問題があります。navigate('root', data)を使用してコンポーネントから別のコンポーネントにデータを渡そうとすると、[object Object],[object Object],[object Object]。

コンポーネント

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]);
angulartypescriptangular-router
12
Kenry Sanchez

ルートパラメータとしてオブジェクトを渡すと、そのオブジェクトでtoStringが呼び出され、結果として[object Object]オブジェクトから。

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

複合型を渡す場合は、stringifyをstringに渡し、stringとして渡す必要があります。取得したら、再びオブジェクトに解析する必要があります。

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

後でアクセスする

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

現在のバージョンでは、これは@angular/router。

Angular 7.2 は、ルート状態をNavigationExtrasに導入します。これは、queryParamsなどに類似したオブジェクトリテラルを受け取ります。

状態は強制的に設定できます。

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 で使用される実際の例を追加しました

19
mtpultz

Paramsでデータのリストを渡すことはできません

したがって、オブジェクトのリストを文字列に変換してから渡す必要があります

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

次に、これを取得しながら解析を行います

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