如何將響應（數組）從一個組件傳遞到另一個組件？

Question

home.component.html

result.componet.ts

import { Component, OnInit ,Input} from '@angular/core';
import {ReplayService} from '../replay.service';


@Component({
  selector: 'app-result',
  templateUrl: './result.component.html',
  styleUrls: ['./result.component.css'],

})

export class ResultComponent implements OnInit {

show:boolean=true;
  @Input() public resultData;



  constructor(private replayService: ReplayService) { }

  ngOnInit() {
    console.log(this.resultData);

    if(this.resultData!==null  ){
      console.log("result"+this.resultData);
    this.show=false;
    }      
  }
}

result.component.html

<div *ngIf="show"> 

  <h4 align="center" style="color: blue" > Replay  Result </h4>

    <table class="table table-bordered"  >

  </table>

  </div>

Answer 1

使用屬性綁定將數據從父組件傳遞到子組件時。 在子組件中，這些值將在ngOnChanges（）生命周期方法中接收。

import { Component, OnInit ,Input} from '@angular/core';
import {ReplayService} from '../replay.service';

@Component({
  selector: 'app-result',
  templateUrl: './result.component.html',
  styleUrls: ['./result.component.css'],

})

export class ResultComponent implements OnInit, OnChanges {

show:boolean=true;
  @Input() public resultData;

  constructor(private replayService: ReplayService) { }

  ngOnInit() {

  }

  ngOnChanges(){
    console.log(this.resultData);

    if(this.resultData!==null  ){
      console.log("result"+this.resultData);
      this.show=false;
    } 
  }
}

Answer 2

有很多方法可以從父級到子級共享數據，但是最直接的方法是使用Input裝飾器。 它通過使用@Input（）裝飾器來工作，以允許通過模板傳遞數據。

parent.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    <app-child [childMessage]="parentMessage"></app-child>
  `,
  styleUrls: ['./parent.component.css']
})
export class ParentComponent{
  parentMessage = "message from parent"
  constructor() { }
}

child.component.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
      Say {{ message }}
  `,
  styleUrls: ['./child.component.css']
})
export class ChildComponent {

  @Input() childMessage: string;

  constructor() { }

}

另外，如果您希望將數據從子級共享給父級，則必須使用ViewChild 。

使用ViewChild，我們可以將一個組件注入另一個組件，因此，我們可以訪問組件的屬性和功能。 要注意的一件事是，子組件在視圖初始化之前將不可用。 因此，我們需要實現AfterViewInit生命周期掛鈎，以從子級接收數據。

parent.component.ts

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { ChildComponent } from "../child/child.component";

@Component({
  selector: 'app-parent',
  template: `
    Message: {{ message }}
    <app-child></app-child>
  `,
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements AfterViewInit {

  @ViewChild(ChildComponent) child;

  constructor() { }

  message:string;

  ngAfterViewInit() {
    this.message = this.child.message
  }
}

child.component.ts

import { Component} from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
  `,
  styleUrls: ['./child.component.css']
})
export class ChildComponent {

  message = 'Im from child!';

  constructor() { }

}