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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！