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

Question

我使用 Angular 8 并尝试使用抽象组件。我想在抽象类中定义 templateUrl 和 styleUrls，但在实现的类中定义选择器名称。像这样：

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

而在幼儿班

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

我尝试仅在这样的实现中使用装饰器，但我觉得这里需要一个更好的方法：

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

是否可以使用@Component类似这样的装饰器？或者对于这种用法有什么技巧或最佳实践吗？

Answer 1

在@Rectangle的有用评论之后，我开始这样：

在抽象类中：

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 {
  // ...
}

然后在实现中：

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

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

当然，它只是不起作用，因为它templateUrl是相对的，并且在实现中该./abstract-list.component.html文件不存在。

下一步我只是尝试在抽象类中使用绝对路径，如下所示：

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']
};

Angular官方文档说：

模板文件的相对路径或绝对URL...

但路径不可能是绝对的。经过一番搜索后，我在主题中找到了这篇文章，这也就解释了为什么路径不能是绝对的。但我从这篇文章中得到了一个想法：

我创建了一个abstract-list.component.html.ts- 扩展很重要.ts- 内容如下：

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

然后将此模板作为变量导入到抽象类中，并导出为对象：

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

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

最后在实现中：

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);
  }
}