web-dev-qa-db-ja.com

Angularの子ルートコンポーネントから親コンポーネントのプロパティにアクセスする方法は？

バージョン：（Angular 5）

私はAngularに慣れており、そこに留まっています。子セレクター<>に[parentData] = "var"を挿入するだけで、親子コンポーネント間でデータを共有する方法を知っています。

しかし、ルーティングを使用する場合;私にはルーターアウトレットしかなく、エラーをスローするため、[parentData]をバインドできません。

子ルートから親プロパティにアクセスするための最良かつ最も簡単な方法は何ですか？

プロジェクトは stackblitz here にあります。

子コンポーネント内に（親コンポーネントから）製品を表示する必要があります。

javascriptangularroutingparent-child
7
shireef khatab

はい、これは非常に簡単です。router-outletservicesを使用する必要があります。実際には、正しいパスに進む前にそのコンポーネントはテンプレートに存在しないため、通常のバインディングはここでは機能しません。

これを回避する最善の方法は、簡単なサービスを作成することです

サービスで

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

@Injectable()
export class DataTransferService {

  private products= new BehaviorSubject<any>([]);
  cast= this.products.asObservable();

  sendAnything(data) {
    this.products.next(data);
  }

}

次に、親コンポーネントと子コンポーネントの両方のコンストラクターにサービスを注入します

親コンポーネント内

 constructor(private dataTransfer: DataTransferService){}

次に、メソッドを作成します

 shareData(data){
    this.dataTransfer.sendAnything(data) // to send something
}

そしてparent.component.htmlからそれを呼び出します

(click)="shareData(data)" // data is the parent data that you want to share

子コンポーネント内

ngOnInitメソッド内に以下を追加します。

 ngOnInit() {
   this.dataTransfer.products.subscribe(res=> this.var = res) // var is the property that you want to assign the data to it.
 }

データを取得して操作します。
詳細と例 doc で見つけることができます

6
Kraken

一方では、ルーターによって追加されたコンポーネントはタグの兄弟になり、置き換えられないため、ルーターアウトレットタグに入力を渡すことはできません。

一方、Angularアプリケーションがますます複雑になると、同じ入力を親コンポーネントから子コンポーネントに渡すことは適切な方法ではなくなります。

あなたの場合、products変数を扱う最良の方法は、productsサービスで動作サブジェクトとして宣言することです。

   prodcuts:Subject<IProducts[]> = new BehaviorSubject<IProducts[]>([]);

親コンポーネントでは、受信したデータを送信します。

ngOnInit() { 
    this._productsService.getProducts()
        .subscribe(
          data => {this.products = data;
          this._productsService.prodcuts.next(data);
          },
          error => this.errMsg = error
        );    
}

最後に、子クライアントでは、サービスで宣言された動作サブジェクトにサブスクライブする必要があります。

export class ChildComponent implements OnInit {
public products = [];

constructor(private _productsService: ProductsService ) { 
}

ngOnInit() {
    this._productsService.prodcuts
    .subscribe(
      data => {
       {this.products = data;
      }
    );    
  } 
}
4
m.bouali