将派生类属性传递给 Angular 中的基类构造函数时出错

Question

I want to be able to pass 'name' variable from the Derived component to the constructor of the Base Component. The reason being I want to enforce Derived components extending from the Base components to pass in the 'name' variable

      @Component({
         selector: 'base-component',
         templateUrl: './base.component.html',
         styleUrls: ['./base.component.scss']
      })
      export class BaseComponent {
        public name: string;

        constructor(public sampleName: string) {
        this.name = sampleName;
        }
      }

I'm importing the 'name' variable from a separate file called name.enum.ts in my Derived component

    export enum Name {
        NAME = 'DummyName'
    }

This is my derived component

    import {Name} from ../name.enum
    @Component({
     selector: 'derived-component',
     templateUrl: './derived.component.html',
     styleUrls: ['./derived.component.scss']
     })
    export class DerivedComponent extends BaseComponent {
      constructor() {
      super(Name.NAME); //This throws an error 'Cant resolve all parameters for BaseComponent'
    }

How do I resolve this issue?

Answer 1

Your base class shouldn't be a component, but an abstract class. Try changing it to

export abstract class BaseComponent {
  public name: string;

  constructor(simpleName: string) {
    this.name = simpleName;
  }
}

Here is a live example: https://stackblitz.com/edit/angular-base-component?file=src/app/app.component.ts