如何将组件选择器标记为已弃用？

Question

我有一个组件

@Component({
  // todo the app-old-selector selector must be removed in the next version
  selector: 'app-new-selector,app-old-selector',
  templateUrl: './component.html'
})
export class Component {
}

通知开发人员 app-old-selector 已弃用的最佳方式是什么？

Answer 1

也许你可以在你的组件代码中写这样的东西：

import { Component, ElementRef } from '@angular/core'

@Component({
 selector: 'app-new-selector,app-old-selector',
 templateUrl: './component.html'
})
export class YourComponent {
    constructor(elem: ElementRef) {
        const tagName = elem.nativeElement.tagName.toLowerCase();
        if (tagName === 'app-old-selector') {
           console.warn('message');
        }
    }
}

意思是我们只是将当前启动的组件的标签名与表示弃用值的字符串进行比较。如果它们相等 - 这意味着您现在需要通知开发人员。

这是一个工作 Stackblitz example。在控制台打开的情况下随意运行它。

Answer 2

据我所知，没有内置的方法可以做到这一点。但是，您可以尝试使用 ElementRef 功能提醒开发人员：

import { Component, ElementRef } from '@angular/core'

@Component({
  selector: 'app-new-selector,app-old-selector',
  templateUrl: './component.html'
})
export class MyComponent {
  constructor(elem: ElementRef) {
    if (elem.nativeElement.tagName.toLowerCase() === 'app-old-selector') {
      console.warn(`'app-old-selector' selector is deprecated; use 'app-new-selector' instead.`);
    }
  }
}

或者，如果您需要此功能可重复使用并希望确保整个库的一致性，您可以创建可注入服务，如下所示：

import { Injectable } from '@angular/core';

@Injectable()
export class Deprecator {
  warnDeprecatedSelector(elem: ElementRef, oldSelector: string, newSelector: string) {
    if (elem.nativeElement.tagName.toLowerCase() === oldSelector) {
      console.warn(`'${oldSelector}' selector is deprecated; use '${newSelector}' instead.`);
    }
  }
}

import { Component, ElementRef } from '@angular/core'

@Component({
  selector: 'app-new-selector,app-old-selector',
  templateUrl: './component.html'
})
export class MyComponent {
  constructor(elem: ElementRef, deprecator: Deprecator) {
    deprecator.warnDeprecatedSelector(elem, 'app-old-selector', 'app-new-selector');
  }
}

Answer 3

我写了一个可重复使用的装饰器，它将组件的选择器标记为已弃用。

import {Component} from '@angular/core';

type Constructor<T = {}> = new (...args: any[]) => T;

export function Deprecated(oldSelector: string) { // This is a decorator factory
  return <T extends Constructor>(Base: T) => {
    return class Deprecated extends Base {
      selectors = [];
      constructor(...args: any[]) {
         super(...args);
         const selector = new Component((Deprecated as any).__annotations__[0]).selector;
         this.selectors = selector.split(', ');
         this.selectors = this.selectors.filter(selector => selector !== oldSelector);
         console.warn('The selector "' + oldSelector + '" is going to be deprecated. Please use one of these selectors [ ' + this.selectors.toString() + ' ]');
      }
    };
  };
}

现在我们只需要用这个装饰器函数装饰我们的组件class，参数如下

@Component({
  selector: 'my-old-app, my-app-new',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
@Deprecated("my-old-app")
export class AppComponent  {
  name = 'Angular';
}

请在 stackblitz 找到代码 here。

另外，请阅读我关于同一主题的blog，其中有逻辑上的解释。

如何将组件选择器标记为已弃用？

How to mark a component selector as deprecated?

selector

deprecated

angular