Как пометить селектор компонента как устаревший? - PullRequest
Новая
       50

Как пометить селектор компонента как устаревший?

0 голосов
/ 01 февраля 2019

У меня есть компонент 

@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 устарела?

Ответы [ 3 ]

0 голосов
/ 01 февраля 2019

Насколько мне известно, нет встроенного способа сделать это.Тем не менее, вы можете попытаться предупредить разработчика, используя функцию 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');
  }
}
0 голосов
/ 04 августа 2019

Я написал многократно используемый декоратор, который помечает селекторы компонентов как устаревшие. 

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

Теперь нам просто нужно украсить наш класс компонентов с помощью этой функции декоратора с параметром, как показано ниже 

@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.

Также, пожалуйста, прочитайте мой блог на ту же тему, в которой есть объяснение логики.

0 голосов
/ 01 февраля 2019

Возможно, вы можете написать что-то вроде этого в коде вашего компонента: 

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 пример .Не стесняйтесь запускать его с открытой консолью.

...