多继承,多重继承,多层继承
Inheritance is one of the most popular ways to reuse code in Angular. It has been used very frequently to build components. Yet, not many developers will apply inheritance to service. In fact, service inheritance is much cleaner and easier to maintain comparing with component inheritance. It can be a good alternative of component inheritance in some cases.
继承是在Angular中重用代码的最流行方法之一。 它已非常频繁地用于构建组件。 但是,没有多少开发人员会将继承应用于服务。 实际上,与组件继承相比,服务继承要干净得多且易于维护。 在某些情况下,它可以很好地替代组件继承。
入门 (Getting started)
Inheritance can be applied either on an abstract class or a concrete class. However, the best practice is to always create an abstract class to encapsulate the logic and reduce noise for other developers working together. Here is an example:
继承既可以应用于抽象类,也可以应用于具体类。 但是,最佳实践是始终创建一个抽象类来封装逻辑并为其他开发人员一起工作减少噪音。 这是一个例子:
@Injectable()
abstract class BankingService {
abstract getAccountType(): string;
abstract transferCredit(amount: number): void;
}
All concrete child services with business logic should extend the base abstract service:
所有具有业务逻辑的具体子服务都应扩展基本抽象服务:
@Injectable()
class InternationalBankingService extends BankingService {
getAccountType(): string {
return 'international-account';
}
transferCredit(amount: number): void {console.log(`Transferred ${amount} from international account`);
}
}
@Injectable()
class DomesticBankingService extends BankingService {
getAccountType(): string {
return 'domestic-account';
}
transferCredit(amount: number): void {console.log(`Transferred ${amount} from domestic account`);
}
}
The @Injectable
decorator for child services is optional as the direct injection of child services is discouraged, which will be explained in next section. Yet, it is still recommended to add that for the sake of readability.
子服务的@Injectable
装饰器是可选的,因为不建议直接注入子服务,这将在下一部分中进行说明。 但是,出于可读性考虑,仍建议添加它。
注入服务 (Injecting the service)
Ideally, the injection of the child services should be avoided as it makes the component less generic and so, less reusable, which contradicts to the purpose of applying inheritance — code reuse. Components should not concern which child services to use as this is what the Angular dependency injection engine is supposed to handle.
理想情况下,应避免注入子服务,因为子服务会使组件的通用性降低,因此可重用性降低,这与应用继承的目的(代码重用)相矛盾。 组件不应该担心要使用哪个子服务,因为这应该是Angular依赖项注入引擎要处理的。
@Component({
selector: 'app-banking',
template: `
The account type is {{ accountType }}
<button (click)="confirm()">Confirm</button>
`
})
export class BankingComponent implements OnInit {
accountType: string;
constructor(
private bankingService: BankingService
) {}
ngOnInit(): void {
this.accountType = this.bankingService.getAccountType();
}
confirm() {
this.bankingService.transferCredit(Math.random() * 10000);
}
}
提供服务 (Providing the service)
The last step is to provide the required child service based on the context via the Angular dependency injection engine. Some may not know how to do this as this is a relatively unpopular feature of Angular. However, it is actually very straight forward and easy to understand.
最后一步是通过Angular依赖项注入引擎基于上下文提供所需的子服务。 有些人可能不知道该怎么做,因为这是Angular相对不受欢迎的功能。 但是,它实际上非常简单,易于理解。
Normally, a service can be provided in this way:
通常,可以通过以下方式提供服务:
...({
...
providers: [
BankingService
]
})
However, it doesn’t work in this case as BankingService
is just an abstract base class. This can be solved simply by adding provide options:
但是,由于BankingService
只是一个抽象基类,因此在这种情况下BankingService
。 只需添加提供选项即可解决此问题:
@Component({
selector: 'app-root',
providers: [
{
provide: BankingService,
useClass: InternationalBankingService
}
],
template: `
<app-banking></app-banking>
`
})
export class AppComponent {}
优于组件继承 (Advantage over component inheritance)
One of the major weakness of component inheritance is that it cannot inherit HTML or CSS. It creates strong coupling between the parent and child class, as the change of these non-inheritable elements can break the children very easily. Here I have written another article for a more detailed explanation:
组件继承的主要缺点之一是它不能继承HTML或CSS。 由于这些不可继承的元素的更改很容易破坏子级,因此它在父级和子级之间建立了强大的耦合。 在这里,我写了另一篇文章以获得更详细的解释:
Unlike component, service is a pure Typescript class, which is fully inheritable. It doesn’t create tight coupling when being inherited. It makes the long term maintenance much easier.
与component不同,service是一个纯Typescript类,可以完全继承。 继承时不会产生紧密耦合。 这使长期维护变得更加容易。
Thanks for reading! Hope you find this article helpful. Any comments would be highly appreciated. :D
谢谢阅读! 希望本文对您有所帮助。 任何意见将不胜感激。 :D
翻译自: https://medium.com/@liutingchun_95744/angular-introduction-to-service-inheritance-aead1a8e1f0c
多继承,多重继承,多层继承