angular知识点--@output()

子组件向父组件传递数据@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>
//我是一段来自父组件的文字~