如何将响应（数组）从一个组件传递到另一个组件？

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() { }

}