我正在尝试重用在各种视图组件中使用的某些业务逻辑和属性。我创建了一个具有所需属性和函数的抽象类,并在组件中继承了它。效果很好。我还用一个空模板创建了一个抽象组件,然后将我的业务逻辑移到了这里。继承这个抽象组件也能正常工作吗?哪种方法是正确的?
方法1:
export abstract class GridViewBase implements IFilterView {
// Bla bla
}
然后在我的组件中:
@Component({
selector: 'order-view',
templateUrl: './order-view.component.html',
styleUrls: ['./order-view.component.css']
})
export class OrderViewComponent extends GridViewBase implements AfterContentChecked, OnInit {
}
方法2:
抽象组件:
@Component({
template: ''
})
export abstract class BaseComponent {
视图组件:
@Component({
selector: 'order-view',
templateUrl: './order-view.component.html',
styleUrls: ['./order-view.component.css']
})
export class OrderViewComponent extends BaseComponent implements AfterContentChecked, OnInit {
}
两者都有效!哪个是对的?
使用这两种方法都有充分的理由。
当:时,我会使用抽象组件或组件继承
- 我有相同的组件逻辑(相同的模型、数据和行为(,但有不同的视图(模板交换(
- 我不想使用super关键字在基类上注入依赖项,因为angular将处理注入
- 我的基类包含角度标注,如@Input或@Output,这表明基类始终需要组件视图才能正常工作
- 我需要编写在任何角度组件生命周期挂钩期间执行的通用代码,例如ngAfterContentChecked((或ngOnDestroy((。继承这个基本抽象组件的组件不必担心在自己内部单独处理这些钩子
当:时,我会使用抽象或类属性
- 我想使用相同的类作为非组件类和组件的基础
- 根本没有组件逻辑(没有html模板依赖项或任何其他依赖项(,只需要一些泛型(如参数(和T类型的函数