Angular day3 父子模块通信

只是加强自己的记忆，目前来说只适用于自己。

ngx-datatable 一个ng的表格组件
请求会来的数据回显页面赋值：

[rows]="orders"  
//orders是接受后端发送的数据
//这是ng中传值的方法
//写在ngx-datatable  这个标签中

父子模块通信：@ViewChild和@Inject

一、@ViewChild
父组件中使用@ViewChild拿到子组件的变量和方法（父组件可调用子组件的方法和变量）

//父组件文件夹中：
export class ParentComponent implements OnInit {
  //通过@ViewChild注册子组件
  @ViewChild(ChildComponent) public child:ChildComponent;
  
  public countNum: number;
  public firstName:string = "Jeck";
  public fullName:string = "";
  constructor() {}
  
  ngOnInit(): void {
    
  }
  displayFull(){
    this.fullName = this.firstName + this.child.lastName;
　　 console.log(this.fullName)  //"Jeck wang"  
  }


//子组件文件中
import { Component, OnInit} from '@angular/core';

@Component({
  selector: 'my-child',
  templateUrl: './child.component.html',
  styleUrls: [ './child.component.css' ],
})
export class ChildComponent implements OnInit {
  public lastName:string = "wang";  //这里赋值
  
  constructor() {}
  
  ngOnInit(): void {
    
  }

}

二、@Inject

子组件中使用@Inject调用父组件中的变量和方法

//父组件
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-parent',
  templateUrl: './parent.component.html',
  styleUrls: [ './parent.component.css' ],
})
export class ParentComponent implements OnInit {
  
  constructor() {}
  
  ngOnInit(): void {
    
  }
  sayHello(){
    console.log("Hello!")
  }
}



//子组件
import { Component, OnInit, Inject, forwardRef} from '@angular/core';
import { ParentComponent } from './parent.component';

@Component({
  selector: 'my-child',
  templateUrl: './child.component.html',
  styleUrls: [ './child.component.css' ],
})
export class ChildComponent implements OnInit {
  
  constructor(
    @Inject(forwardRef(()=>ParentComponent)) public parent:ParentComponent
  ) {}
  
  ngOnInit(): void {
    this.parent.sayHello();   //"Hello!"
  }
}