Angular8--父子组件之间的传值

目录

一、通过输入型绑定把数据从父组件传到子组件。

二、父组件监听子组件的事件

三、通过 setter 截听输入属性值的变化

四、通过ngOnChanges()来截听输入属性值的变化

五、父组件调用@ViewChild()

---

https://angular.cn/guide/component-interaction官方文档

https://blog.csdn.net/u012967849/article/details/78767294

在该实例中牵扯到的父子文件。

父组件：parent.component.html;    parent.component.ts

子组件：child.component.html;    child.component.ts

一、通过输入型绑定把数据从父组件传到子组件。

@Input :  

父组件给子组件属性值；父组件用子组件的属性值和方法建议用@ViewChild，若用@Input可能需要做数据拦截。
将父作用域中的值“输入”到子作用域中，之后子作用域进行相关处理
@Output ：
子作用域触发事件执行响应函数，而响应函数方法体则位于父作用域中，相当于将事件“输出”到父作用域中，在父作用域中处理。
Output一般都是一个EventEmitter的实例，使用实例的emit方法将参数emit到父组件中，触发父组件中对应的事件。

parent.component.html文件中：
<app-child [groupIdName]="serviceSelected?.group_id" (addSuccess)="addSuccessEvent()"></app-child>

child.component.ts文件中：
export class AddServiceComponent {
    // 子组件暴露一个 EventEmitter 属性
  @Output() addSuccess = new EventEmitter();
    // @Input为子组件的属性名groupId指定一个别名groupIdName
  @Input('groupIdName') groupId: number;
  constructor(private http: HttpClient) {}
  handleOk(){
     this.http.post(url, params).subscribe(
     () => {
        this.message.success(this.serviceAddData.id ? '编辑成功' : '添加成功');
        this.addSuccess.emit();
        this.handleCancel();
        this.addForm.form.reset();
      }
    )}
    // 在子组件中使用父组件传递过来的值
    open(data = {}) {
    this.serviceAddData = Object.assign({
      name: '',
      ability_ids: [],
      group_id: this.groupId
    }, data);
  }
}

二、父组件监听子组件的事件

子组件暴露一个 EventEmitter 属性，当事件发生时，子组件利用该属性 emits(向上弹射)事件。父组件绑定到这个事件属性，并在事件发生时作出回应。

子组件的 EventEmitter 属性是一个输出属性，通常带有@Output 装饰器，就像在 VoterComponent 中看到的。

三、通过 setter 截听输入属性值的变化

使用一个输入属性的 setter，以拦截父组件中值的变化，并采取行动。

子组件 NameChildComponent 的输入属性 name 上的这个 setter，会 trim 掉名字里的空格，并把空值替换成默认字符串。

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-name-child',
  template: '<h3>"{
  {name}}"</h3>'
})
export class NameChildComponent {
  private _name = '';

  @Input()
  set name(name: string) {
    this._name = (name && name.trim()) || '<no name set>';
  }

  get name(): string { return this._name; }
}