angular的组件继承_Angular —由组件继承引起的维护问题

angular的组件继承

Inheritance is a popular way to reuse existing components. Many developers rely heavily on inheritance for code reuse, especially for whom with a strong object-oriented programming background. It is true that inheritance is very convenient to use. However, it is in fact, a double edged sword which can cause cause maintenance issue.

继承是重用现有组件的流行方法。 许多开发人员严重依赖于继承来重复使用代码，尤其是对于那些具有强大的面向对象编程背景的开发人员而言。 的确，继承非常易于使用。 但是，实际上，这是一把双刃剑，可能引起维护问题。

问题1：继承不适用于HTML和CSS (Issue 1: Inheritance doesn’t work for HTML and CSS)

Angular utilizes TypeScript which nicely supports an object-oriented programming style. Yet, Angular also has elements that are not object-oriented, which are the HTML and CSS. These elements do not have the concept of inheritance. We can inherit a class, but there is no way to inherit HTML or CSS. For example, assume we have a ComponentA:

Angular利用TypeScript很好地支持面向对象的编程风格。 但是，Angular还具有非面向对象的元素，例如HTML和CSS。 这些元素没有继承的概念。 我们可以继承一个类，但是无法继承HTML或CSS。 例如，假设我们有一个ComponentA ：

@Component({
       
  template: `Hi, I am ComponentA. Value = {
       { value }}`
})
export class ComponentA {
       
  value = 1;
}

When we want to make change to the HTML or CSS during inheritance, we will need to make a new one. All the existing HTML or CSS codes are