angular组件通讯

参考：
https://blog.csdn.net/liuyu5210/article/details/76559957
http://www.cnblogs.com/banluduxing/p/9290569.html

父传子，使用Input

父html：

<div>
  component-communication works!
  <div>
    <button nz-button (click)="changeColor();">改变childColor的值</button>
  </div>
  <app-child-component [childColor]='colorFlag'></app-child-component>
</div>

父ts：

  public colorFlag = false;

  changeColor() {
    this.colorFlag = !this.colorFlag;
    console.log('父组件的colorFlag值：', this.colorFlag);
  }

子组件html：

<p>
  child-component works!------------{{childColor}}
</p>
<div [ngClass]="{'color-red':childColor}">
  我是div的内容，颜色是否会改变
</div>

子组件ts：

@Input() childColor:any;

子传父：Output

父HTML：

<div>
  <div>父页面</div>
  <div>父页面的值-{{fatherNumber}}</div>
  <app-child-component (childEvent)="fatherEvent($event);"></app-child-component>
</div>

父TS：

  public fatherNumber: any;

  fatherEvent(e) {
    console.log('传递到父组件的值：', e);
    this.fatherNumber = e;
  }

子HTML：

<div>
  <div>子页面</div>
  <div>子页面的值-{{childNumber}}</div>
  <button nz-button (click)="changeNumber();">改变父页面的值</button>
</div>

子TS：

  @Output() childEvent: EventEmitter = new EventEmitter();
  public childNumber = 0;

  changeNumber() {
    this.childNumber++;
    this.childEvent.emit(this.childNumber);// 可以有参数，也可以没有参数
  }

子获得父的实例：

父HTML：

<div>
  <div>父页面</div>
  <div>父页面的值-{{fatherNumber}}</div>
  <app-child-component></app-child-component>
</div>

父TS：

 public fatherNumber: any=0;

子HTML：

<div>
  <div>子页面</div>
  <div>子页面的值-{{childNumber}}</div>
  <button nz-button (click)="changeNumber();">改变父页面的值</button>
</div>

子TS：

// 如何在自己的函数中获取到app呢？？？
constructor(@Host()
              @Inject(forwardRef(() => ComponentCommunicationComponent))
                app: ComponentCommunicationComponent) {
    console.log(app);
    setInterval(() => {
      app.fatherNumber++;
    }, 1000);
  }

父组件获取子组件的实例

父HTML：

<div>
  <div>父页面</div>
  <div>父页面的值-{{fatherNumber}}</div>
  <button nz-button (click)="changeNumber();">改变子组件里面的值</button>
  <app-child-component></app-child-component>
</div>

父TS：

 /**
   * 父组件改变子组件里面的值
   */
  @ViewChild(ChildComponentComponent) child: ChildComponentComponent;

  changeNumber() {
    this.child.childNumber++; // 子组件里面有childNumber的值
  }

service存储值或者函数

service文件：

 i=0;
  test(){
    console.log("test函数执行了");
  }

父HTML：

<div>
  <div>父页面</div>
  <div>父页面的值-{{myService.i}}</div>
  <button nz-button (click)="changeNumber();">改变子组件里面的值</button>
  <app-child-component></app-child-component>
</div>

父ts：


  constructor(public myService: MyServiceService) { }
  /**
   * 父组件改变子组件里面的值
   */
  changeNumber() {
    this.myService.i++;
    console.log('父组件里面的值：', this.myService);
    this.myService.test();
  }

子HTML：

<div>
  <div>子页面</div>
  <div>子页面的值-{{myService.i}}</div>
  <button nz-button (click)="changeNumber();">改变父页面的值</button>
</div>

子ts：

constructor(public myService: MyServiceService) {  }
  /**
   * 子组件改变父组件的值
   */
  changeNumber() {
    this.myService.i++;
    this.myService.test();
  }

EventEmitter

service：

export class MyServiceService {
  change: EventEmitter = new EventEmitter();
}

父ts：

constructor(public myService: MyServiceService) { }
  public fatherNumber: any = 0;

  /**
   * 父组件改变子组件里面的值
   */

  changeNumber() {
   this.myService.change.emit(++this.fatherNumber);
  }

子ts：

 constructor(public myService: MyServiceService) { }
  ngOnInit() {
    this.myService.change.subscribe((value) => {
      this.childNumber = value;
    });
  }
  public childNumber = 0;

也可以反向操作，在子发散，在父订阅，那么这么点击父或者子的改变数值函数，都会执行，且数字同步！（有点像订阅了）

猜你喜欢