Question

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

unicode

现在Command-Shift-O和moduleName componentA componentB非常相似，因为它们共享一些属性和方法，例如：

componentA

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

componentB

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

protected available: boolean = true;

这很好用。但是，当我研究这种灵魂时，很多人都在说：

不要使用继承，在这种情况下请使用组合。

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

非常感谢您的时间。

Answer 1

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

通过运行ng g s my-service
将public available: boolean = true;添加到服务
provide通过组件的服务，在组件上的@Component配置中
将服务注入两个组件构造函数constructor(private myService:MyService)

现在您的构图可以保留数据和功能

Answer 2

如果创建的组件大部分具有相同的逻辑。您可以使用继承，例如controlSelectComponent和controlInputComponent stackblitz example

对于合成，您需要创建服务并将其提供给两个组件。但是，all service are singletone不会使组件状态保持服务状态。当一个组件更改状态时，另一个组件崩溃。

您还可以在提供者部分为每个组件提供服务

@Component({
  selector: 'app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [MyService]
})
export class AppComponent {
  constructor(private myService: MyService) {
  }
}

但是如果在服务中保存状态不是最佳解决方案

结论

将服务和组合用于组件之间的共享帮助方法。

对具有相同逻辑和状态更改的组件使用抽象类和继承。

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

2 个答案: