Angular 6中组件之间共享逻辑时,如何使用合成而不是继承？

我在Angular中有一个结构如下的模块：

moduleName
    componentA
    componentB

现在componentA和componentB非常相似,因为它们共享一些属性和方法,例如：

protected available: boolean = true;

因为不想重复自己,所以我创建了一个基类,用于存储所有这些内容：

export abstract class BaseComponent {
    protected available: boolean = true;
}

并且两个控制器都从该类继承：

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.

好的,但是我该如何使用合成呢？与当前解决方案相比,收益真的那么大吗？

非常感谢您的宝贵时间.

解决方法:

为了使对象成角度,您需要在类内部引用该对象,该对象共享数据和功能.为此,您需要使用Angular服务,并将它们注入到您的类中,并且每个组件应该有1个服务实例.

>通过运行ng g s my-service创建新服务
>添加公共可用：boolean = true;服务
>通过组件的服务,在组件上的@Component配置中
>将服务注入到您的两个组件构造函数中,构造函数(private myService：MyService)

现在,您可以保留数据和功能

标签：angular,typescript,composition,javascript,angular6
来源： https://codeday.me/bug/20191108/2008847.html