如何在角度6的兩個組件之間共享http響應？

Question

我有一個名為模式的組件。 在此模型ts文件中，Im發出http請求以從節點js獲取json數據。 檢索Im后，僅以表格格式顯示它。 我的表結構如下。

modalId   modalName  subModal  AddSubmodal
111        modal1                add      
112        modal2                add

這里的問題是單擊添加按鈕后，將出現一個彈出框（另一個組件），要求我們輸入子模型名稱。 在這里，我們應該顯示模式名稱，必須為其輸入子模型詳細信息。

因此，在單擊添加按鈕之后，我需要傳遞modalId來獲取模型詳細信息。 所以在這里，我需要將modalID動態傳遞給addmodel（second）組件。 有人可以告訴我該怎么做嗎？

我的modal.component.ts：

 @Component({
selector: 'app-modal',
templateUrl: './modal.component.html',
styleUrls: ['./modal.component.css']
})
 export class ModalComponent extends Lifecycle {
 public d: any;
 constructor(
    private $modal: $ModalManagerService,
    private http: HttpClient,
) {
    super();
}
 _initialize(): void {          
   this.http.get('/getModel',{responseType:"json"}).subscribe(
   response => {
       this.data = response;
        var sample=JSON.stringify(response);
      });
    }
addSubmodal(modalId){
 let obj = this.$modal.show(AddSubModalComponent)
        .subscribe(r => {
            obj.unsubscribe();
        });

};

我的模態html：

 <table class="table table-bordered" >
    <thead>
      <tr>
        <th>modal ID</th>
        <th>modal Name</th>
        <th>SubModal</th>
        <th>AddSubmodal</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let i of d">
        <td>{{ i.Record.modalId }}</td>
        <td>{{ i.Record.modalName }}</td>
        <td></td>
        <td>
          <img src="./../Add_Icon.svg" (click)="addSubmodal(i.Record.modalId);">
        </td>
      </tr>
    </tbody>
  </table>

由於我是新手，我只是在stackoverflow中瀏覽角度答案並進行操作。 請在第二個html文件中告訴我如何實現此目標？

Answer 1

使用輸入和輸出裝飾器

基本概念---> 演示

app.component.html：

<app-component1 (elm)="catch1Data($event)">

</app-component1>
<app-component2 [elm]="datatocomp2" *ngIf="datatocomp2"></app-component2>

parent component : {{datatocomp2 | json}}

app.component.ts：

 datatocomp2: any;

  catch1Data(data) {
    console.log(data)
    this.datatocomp2 = data;
  }

component1.ts：

@Output () elm : EventEmitter<any> = new EventEmitter<any>();



objectData: any;

  constructor() { }



 ngOnInit() {
    let objectData = {
      comp: 'component 1',
      data: 'anything'
    }

this.objectData = objectData;
this.elm.emit(objectData)
  }

component2.ts：

@Input() elm: any;

  constructor() { }

  ngOnInit() {
    console.log(this.elm);
  }

Answer 2

使用共享服務在組件之間共享數據，事件發射器方法並不是組件路由的最佳方法

簡單示例，創建一個數據共享服務

//數據共享服務

import { ReplaySubject } from 'rxjs/Rx';

export class DatashareService {

    private dataObs$ = new ReplaySubject<any>(1);

    getData() {
        return this.dataObs$.asObservable();
    }

    updateData(data) {
        this.dataObs$.next(data);
    }

    constructor() { }
}

在您獲取數據的組件中，

import { DatashareService } from '../datashare.service';

更新可觀察值

this.dataService.updateData(this.modal_id);

從子組件訂閱可觀察對象

import { Component, OnInit,OnDestroy,NgZone } from '@angular/core';
import { DatashareService } from '../datashare.service';
import { Subscription } from 'rxjs/Subscription';

在構造函數中

 constructor(private dataService: DatashareService
  ,private zone:NgZone){}

現在，訪問init上的數據，

 ngOnInit() {


        this.subscription.add(this.dataService.getData().subscribe(data => { 
           this.zone.run(()=>{
               console.log(data);
               this.modal_selected=data;

            })

        }))

             }

別忘了取消訂閱

 ngOnDestroy() {
        // unsubscribe to ensure no memory leaks
        this.subscription.unsubscribe();

    }