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

一、@ViewChild

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

parent.component.ts:

import { Component, OnInit, ViewChild } from '@angular/core';
import { ChildComponent } from './child.component';@Component({selector: 'my-parent',templateUrl: './parent.component.html',styleUrls: [ './parent.component.css' ],
})
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"}
}

child.component.ts:

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调用父组件中的变量和方法

parent.component.ts:

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!")}
}

child.component.ts:

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!"}
}

注意：如果父子模块通过以上方式相互引用，请在父模块中使用 @ViewChild(forwardRef(()=>ChildComponent)) public child:ChildComponent 方式避免父子组件循环引用报错