Angular8-1つのコンポーネントから2つ、次に3つにデータをエクスポートする方法

609tom

1つのコンポーネントから2つ、次に3つにデータをエクスポートする方法は?

product-list.component.tsコンポーネントにデータオブジェクトがあります:

    export class ProduktListComponent implements OnInit {
        productList = {};

        constructor(){}
        ngOnInit() {}

        getProdukt(){
        // ..
        this.productList= data; // this is an object
        }
    }

それはに含まれていproduct.component.htmlます:

        <!--  code  -->
        <app-product-list [hidden]='!hideList'></app-product-list>
        <app-edit-product [hidden]='!hideEditt'></app-edit-product> 

コンポーネントapp-edit-productからにデータを転送する方法はapp-product-listしたがって、app-product-listコンポーネントからデータをに渡しますapp-edit-product

ご助力ありがとうございます

ラフィ・ヘニグ

あなたがしなければならないのは、サービスを作成し、を使用BehaviorSubjectして両方のコンポーネントに挿入し、入力値をサービスセッターに割り当て、他のコンポーネントで観察可能としてアクセスすることだけです。

export class EditProductComponent implements OnInit {
  list = []
  constructor(private storeService: StoreService) {}

  ngOnInit(){
    this.storeService.list$.subscribe(list => this.list = list)
  }
}

export class ProductListComponent implements OnInit {
  list = [1, 2, 3, 4, 5, 5]

  constructor(private storeService: StoreService) {}
  ngOnInit(){
    this.storeService.list = this.list
  }
}


@Injectable({
  providedIn: 'root',
})
export class StoreService {
  private listSoruce = new BehaviorSubject<any>(null);
  public list$ = this.listSoruce.asObservable();

  set list(v){ this.listSoruce.next(v)}
}

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

Angular8パス

分類Dev

コンポーネントのホストスタイルを動的に設定する方法Angular8

分類Dev

Angular8でFormArrayバリデーターを子コンポーネントから親コンポーネントに伝播する

分類Dev

Angular 6の1つのコンポーネントから他のコンポーネントに1つの値のみを渡す方法は?

分類Dev

コンポーネントを1つのモジュールからその子モジュールにAngularでエクスポートおよびインポートする方法

分類Dev

Angular @ ViewChildで子コンポーネントから親コンポーネントにデータを渡す2つの引数が必要です

分類Dev

Angular2で1つのコンポーネントから別のコンポーネントに変数値を渡す方法

分類Dev

Angular8ジェネリックコンポーネント

分類Dev

コンポーネントhtmlのディレクティブに関するAngular8の問題

分類Dev

Angular8でネストされたコンポーネントを作成してポイントする方法

分類Dev

JQueryUIをAngular8プロジェクトにインポートする方法

分類Dev

リクエストオプションをangular8にインポートする方法

分類Dev

HttpClientリクエストの結果をAngularのいくつかのコンポーネントに適切にマルチキャストする方法は?

分類Dev

データが見つからない場合にエクスポートアラートのデータを表示しない方法Angular6kendo-excelexportコンポーネント

分類Dev

Angular5でモデルを1つのコンポーネントから別のコンポーネントに渡す

分類Dev

Angular8コンポーネントでのデータアクセスの奇妙な奇妙さ

分類Dev

ホストコンポーネントのAngular2からコンポーネントスタイルをターゲットにする方法

分類Dev

子コンポーネントangular7から親コンポーネント関数に2つの引数を渡す方法は?

分類Dev

ユニットテストAngular2エラー:ルーターを挿入する前に少なくとも1つのコンポーネントをブートストラップしますか?

分類Dev

Angular5のあるコンポーネントから別のコンポーネントにサービスデータを渡す方法

分類Dev

Angular8ルーターが一部のコンポーネントで機能しない-インデックスにフォールバック

分類Dev

クリックイベントAngular8で一度に1つのキー値を開きます

分類Dev

Angular 2は、2つのほぼ同一のコンポーネントから1つの「汎用」コンポーネントを作成します

分類Dev

BehaviorSubject Angular8に関係のないコンポーネント間でデータを送信中にエラーが発生しました

分類Dev

Angular8のライブラリからすべてのクラスをインポートする

分類Dev

Angular8コンポーネントでMatSlideToggleを切り替えます

分類Dev

Angular 61つのコンポーネントの配列を他のコンポーネントに渡す方法

分類Dev

Angular8でのリクエスト

分類Dev

Angular8でAngularFlexLayoutブレークポイントを設定する方法

Related 関連記事

  1. 1

    Angular8パス

  2. 2

    コンポーネントのホストスタイルを動的に設定する方法Angular8

  3. 3

    Angular8でFormArrayバリデーターを子コンポーネントから親コンポーネントに伝播する

  4. 4

    Angular 6の1つのコンポーネントから他のコンポーネントに1つの値のみを渡す方法は?

  5. 5

    コンポーネントを1つのモジュールからその子モジュールにAngularでエクスポートおよびインポートする方法

  6. 6

    Angular @ ViewChildで子コンポーネントから親コンポーネントにデータを渡す2つの引数が必要です

  7. 7

    Angular2で1つのコンポーネントから別のコンポーネントに変数値を渡す方法

  8. 8

    Angular8ジェネリックコンポーネント

  9. 9

    コンポーネントhtmlのディレクティブに関するAngular8の問題

  10. 10

    Angular8でネストされたコンポーネントを作成してポイントする方法

  11. 11

    JQueryUIをAngular8プロジェクトにインポートする方法

  12. 12

    リクエストオプションをangular8にインポートする方法

  13. 13

    HttpClientリクエストの結果をAngularのいくつかのコンポーネントに適切にマルチキャストする方法は?

  14. 14

    データが見つからない場合にエクスポートアラートのデータを表示しない方法Angular6kendo-excelexportコンポーネント

  15. 15

    Angular5でモデルを1つのコンポーネントから別のコンポーネントに渡す

  16. 16

    Angular8コンポーネントでのデータアクセスの奇妙な奇妙さ

  17. 17

    ホストコンポーネントのAngular2からコンポーネントスタイルをターゲットにする方法

  18. 18

    子コンポーネントangular7から親コンポーネント関数に2つの引数を渡す方法は?

  19. 19

    ユニットテストAngular2エラー:ルーターを挿入する前に少なくとも1つのコンポーネントをブートストラップしますか?

  20. 20

    Angular5のあるコンポーネントから別のコンポーネントにサービスデータを渡す方法

  21. 21

    Angular8ルーターが一部のコンポーネントで機能しない-インデックスにフォールバック

  22. 22

    クリックイベントAngular8で一度に1つのキー値を開きます

  23. 23

    Angular 2は、2つのほぼ同一のコンポーネントから1つの「汎用」コンポーネントを作成します

  24. 24

    BehaviorSubject Angular8に関係のないコンポーネント間でデータを送信中にエラーが発生しました

  25. 25

    Angular8のライブラリからすべてのクラスをインポートする

  26. 26

    Angular8コンポーネントでMatSlideToggleを切り替えます

  27. 27

    Angular 61つのコンポーネントの配列を他のコンポーネントに渡す方法

  28. 28

    Angular8でのリクエスト

  29. 29

    Angular8でAngularFlexLayoutブレークポイントを設定する方法

ホットタグ

アーカイブ