angular 组件传值---****---子传父。。。。@Output
*****子组件
--------ts文件
import {Component,Output,EventEmitter,OnInit} from ‘@angular/core‘;
@Component({
selector: ‘child-Component‘,
templateUrl: ‘./child.component.html‘,
styleUrls: [‘./child.component.less‘]
})
export class childComponent implements OnInit {
//使用"事件传递"是 "子组件" 向 "父组件" 传递数据最常用的方式，子组件需要实例化EventEmitter类来订阅和触发自定义事件
@Output() childDataevent = new EventEmitter();//自定义事件 实例化EventEmitter，赋值给event，event被@Output装饰器定义为输出属性，
private username: string; // 这样event具备了向上级传递数据的能力，通过调用EventEmitter类中定义的emit方法，来向上传递数据
constructor() {}
ngOnInit(): void {}
submitVal(){
this.childDataevent.emit(this.username);
return
}
}
-----html文件
用户名<input nz-input [(ngModel)]="username" name="username" type="text">
<button (click)="submitVal()">提交--子传父</button>
*****父组件
--------ts文件
import { Component,OnInit } from ‘@angular/core‘;
@Component({
selector: ‘logoSing‘,
templateUrl: ‘./logoSing.html‘,
styleUrls: [‘./logoSing.css‘]
})
export class LogoSingComponent implements OnInit {
private parent_username: string;
constructor() { }
ngOnInit() { }
getData(event) {
this.parent_username = event;
}
}
--------html文件
子组件展示在父组件的值：{{parent_username}}
<child-Component (childDataevent)="getData($event)"></child-Component>
