【技巧】ionic/angular 子组件继承父组件不依赖订阅观

前言：我看到了同事写了一个用来返回http返回状态的fatherClass，然后又另外写了一个状态组件，然后我觉得这两个东西能结合一起写就有了下文

实现目的：子组件继承父组件不依赖订阅观察和顶层的@input和@output进行数据交互

father.ts

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-father',
  templateUrl: './father.component.html',
  styleUrls: ['./father.component.scss']
})
export class FatherComponent implements OnInit {
  static s = 1;
  constructor() {
  }

  ngOnInit() {
  }

  get current() {
    return FatherComponent.s;
  }
  set current(v) {
    FatherComponent.s = v;
  }

  facall(callback) {
    console.log(FatherComponent.s);  // 1
    FatherComponent.s = callback;
    console.log(FatherComponent.s);    // 3
  }

}

这里有几个地方要注意
1、s是用是静态属性；
2、用get和set的原因：因为facall在child调用的时候，里面的this的作用域不同，会导致视图数据不更新（如果能解决this作用域问题可以不用set和get）

father.html

 <ng-content></ng-content>
 <p>
   {{current}}
 </p>

child.ts

import { Component, OnInit } from '@angular/core';
import { FatherComponent } from '../father/father.component';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.scss']
})
export class ChildComponent extends FatherComponent implements OnInit {
  constructor() {
    super();
  }

  ngOnInit() {
  }

  click() {
    super.facall(3);  //  调用父类的facall()
  }
}

child.html

<p (click)='click()'>
  child works!
</p>

任意页面的html

<app-father>
  <app-child></app-child>
</app-father>

用途：father里面可以写各种http返回或其他状态处理的效果。........（不会录屏）