我在 Angular 中有一个结构如下的模块:
moduleName
componentA
componentB
现在 componentA
和 componentB
非常相似,因为它们共享一些属性和方法,例如:
protected available: boolean = true;
因为我不想重复,所以我创建了一个基类,它存储了所有这些:
export abstract class BaseComponent {
protected available: boolean = true;
}
并且两个 Controller 都继承自该类:
import { BaseComponent } from '../base.component';
export class ComponentA extends BaseComponent implements OnInit {
constructor() {
super();
}
ngOnInit() {
console.log(this.available);
}
}
这很好用。然而,当我研究这个灵魂时,很多人都在说:
Don't use inheritance, use composition in this case.
好的,但是我怎样才能使用组合呢?与当前解决方案相比, yield 真的那么大吗?
非常感谢您的宝贵时间。
最佳答案
为了以 Angular 组合对象,您需要在您的类中引用该对象,它共享数据和功能。为此,您需要使用 Angular 服务,并将它们注入(inject)您的类,并且每个组件应该有 1 个服务实例。
- 通过运行
ng g s my-service
创建一个新服务,从您的服务注释中删除providedIn: 'root'
(我们希望为每个组件提供实例)< - 添加
public available: boolean = true;
到服务 通过组件提供
服务,在组件的@Component
配置中- 在您的两个组件构造函数中注入(inject)服务,
constructor(private myService:MyService)
现在你有了一个保留数据和功能的组合
@Component({
selector: 'app',
templateUrl: './app.my-component.html',
styleUrls: ['./app.my-component.css'],
providers: [MyService]
})
export class MyComponent {
constructor(private myService: MyService) {
}
}
关于javascript - 在 Angular 6 中的组件之间共享逻辑时如何使用组合而不是继承?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52333542/