javascript - 在 Angular 6 中的组件之间共享逻辑时如何使用组合而不是继承？

Question

我在 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 真的那么大吗？

非常感谢您的宝贵时间。

Answer 1

为了以 Angular 组合对象，您需要在您的类中引用该对象，它共享数据和功能。为此，您需要使用 Angular 服务，并将它们注入(inject)您的类，并且每个组件应该有 1 个服务实例。

1. 通过运行 ng g s my-service 创建一个新服务，从您的服务注释中删除 providedIn: 'root'(我们希望为每个组件提供实例)<
2. 添加public available: boolean = true;到服务
3. 通过组件提供服务，在组件的@Component配置中
4. 在您的两个组件构造函数中注入(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) {
  }
}