如何在抽象类和 Angular 8 中抽象类的实现中使用@Component 装饰器？

Question

I use Angular 8 & try to use abstract components. I want to define the templateUrl & the styleUrls in my abstract class, but the selector name in the implemented class. Like this:

@Component({
  // selector isn't defined here
  templateUrl: './abstract-list.component.html',
  styleUrls: ['./abstract-list.component.scss']
})
export abstract class AbstractListComponent<T> implements OnInit {
  // ...
}

And in the child class

@Component({
  selector: 'app-my-custom-list',
  // templateUrl & styleUrls is should be inherited
})
export class MyCustomListComponent extends AbstractListComponent<MyCustomListInterface> implements OnInit {
  // ...
}

I tried to use the decorator only in implementation like this, but I feel here need to be a better way:

@Component({
  selector: 'app-my-custom-list',
  templateUrl: '../../abstract-list/abstract-list.component.html',
  styleUrls: ['../../abstract-list/abstract-list.component.scss']
})

Is it possible to use @Component decorator something like this? Or is there any trick or best practice to something like this usage?

Answer 1

After @Rectangular 's useful comments I started this way:

In abstract class:

export const componentDecoratorPreset = {
  // selector isn't defined here
  templateUrl: './abstract-list.component.html',
  styleUrls: ['./abstract-list.component.scss']
};

export abstract class AbstractListComponent<T> implements OnInit {
  // ...
}

And then in the implementation:

import { AbstractListComponent, componentDecoratorPreset } from 'src/app/components/_absrtact/list/abstract-list.component';

@Component({
  ...componentDecoratorPreset,
  selector: 'app-my-custom-list',
})

It's just didn't worked of course because the templateUrl was relative and in the implementation the ./abstract-list.component.html file not exists.

Next step I just tried to use absolute paths in the abstract class like this:

export const componentDecoratorPreset = {
  // selector isn't defined here
  templateUrl: 'src/app/components/_absrtact/list/abstract-list.component.html',
  styleUrls: ['src/app/components/_absrtact/list/abstract-list.component.scss']
};

The official Angular documentation say:

The relative path or absolute URL of a template file...

But the path can't be absolute. After little searching I found this article in the topic, and it make sense why the path can't be absolute. But I get an idea from this article:

I created a abstract-list.component.html.ts - it's important the extension is .ts - with this content:

export default `<div class="container-fluid">...here is the abstract's template...</div>`

Then import this template as a variable in the abstract class and export as an object:

import template from './abstract-list.component.html';

export const componentDecoratorPreset = {
  // selector: must be defined in the implementation
  template: template as string,
};

Finally in the implementation:

import { Component, OnInit } from '@angular/core';
import { AbstractListComponent, componentDecoratorPreset } from 'src/app/components/_absrtact/list/abstract-list.component';
import { AddressTypeInterface } from 'src/app/models/address/type/address-type.interface';
import { AddressType } from 'src/app/models/address/type/address-type.model';

@Component({
  selector: 'app-address-type-list',
  ...componentDecoratorPreset
})
export class AddressTypeListComponent extends AbstractListComponent<AddressTypeInterface> implements OnInit {
  constructor() {
    super(AddressType);
  }
}