丨@Input()：父组件给子组件传值
//父.ts
public userInfo: any= "userInfo"
//父.html
<app-子 [userInfo]="userInfo"></app-子>
//子.ts
import { Component, OnInit, Input } from '@angular/core';
@Input() userInfo: any;
//子.html
{{userInfo}}
可以传递值或者方法
丨 @ViewChild()：父组件调用子组件方法
//父.ts
import { Component, OnInit, ViewChild } from '@angular/core';
@ViewChild('子组件名称') 子组件名称:any
fun() {
this.子组件名称.方法()
}
//父.html
<app-子组件名称 #forms></app-子逐渐名称>
丨 @Output / EventEmitter：子组件调用父组件方法
//子.ts
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
@Output() public outer = new EventEmitter
funChild(){
this.outer.emit('我是子组件中的数据')
}
//子.html
<button (click)="funChild()">点击</button>
//父.ts
funParent(data: any){
alert(data)
}
//父.html
<app-forms (outer)="funParent($event)"></app-forms>
