前言：我看到了同事写了一个用来返回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返回或其他状态处理的效果。........（不会录屏）
