子组件向父组件传递数据@output()
碎碎念:这是一个非常笨的开发,这也是第一次写博客,目的是想在学习angular知识的过程中把一些知识点记下来。(如果能帮助到需要的人,也是一件好事)都是一些自己在学习过程中的一点体会,如果有什么不对的感谢大家指正一起学习!也希望不要说难听的话(毕竟是个心灵脆弱的女汉纸…)
子组件向父组件传值的两种情景
1.在子组件中触发点击事件,仅仅通知父组件这个事件
2.在子组件中触发点击事件,通知父组件这个事件并传值
在子组件中触发点击事件父组件接收并处理
直白的说,在子组件中触发了一个单击事件,然后告诉父组件:“我点击了”。其他的就交给父组件处理了。
子组件html中click方法
<p (click)="show()">
点击我~
</p>
子组件ts
export class TestComponent implements OnInit {
@Output() onTest = new EventEmitter();
constructor() { }
ngOnInit() {
}
show() {
this.onTest.emit();
}
}
父组件html
【在父组件接收这个click方法(app-test为子组件)】
<app-test (onTest)="showTest()"></app-test>
父组件ts
export class HomeComponent implements OnInit {
constructor() { }
ngOnInit() {
}
showTest(){
alert("我是来自子组件的触发")
}
}
在子组件中触发点击事件,通知父组件这个事件并传值
直白的说,在子组件点击的时候,并传递一个值给父组件
子组件html中click方法
<p (click)="show()">
点击我~
</p>
子组件ts
export class TestComponent implements OnInit {
font: string = "我是一段来自父组件的文字~";
@Output() onTest = new EventEmitter<string>();
constructor() { }
ngOnInit() {
}
show() {
this.onTest.emit(this.font);
}
}
父组件html
【在父组件接收这个click方法(app-test为子组件)】
<app-test (onTest)="showOne($event)"></app-test>
父组件ts
export class HomeComponent implements OnInit {
//定义一个变量来接收子组件传递的值
font: string;
constructor() { }
ngOnInit() {
}
showOne(font: string) {
this.font = font;
}
}
将获取的值显示在页面上
父组件html
<p>{{font}}</p>
//我是一段来自父组件的文字~