7
votes

Comment marquer un sélecteur de composant comme obsolète?

J'ai un composant

@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 {
}

Quelle est la meilleure façon d'informer un développeur que app-old-selector est obsolète?

p >

angular deprecated selector

1 commentaires

Je sais que c'est trop tard mais j'ai écrit un décorateur réutilisable qui sert le but. Veuillez lire ma réponse.

3 Réponses :

3
votes

Vous pouvez probablement écrire quelque chose comme ceci dans le code de votre composant:

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

Cela signifie que nous comparons simplement le nom de balise du composant actuellement démarré avec la chaîne représentant la valeur obsolète. S'ils sont égaux, cela signifie que vous devez maintenant informer le développeur.

Voici un Exemple Stackblitz . N'hésitez pas à l'exécuter avec la console ouverte.

4 commentaires

Et une vérification statique?

Que voulez-vous dire?

Je voudrais aider les développeurs lors de l'écriture de code comme le fait Typescript :)

Vous pourriez probablement essayer de payer avec l'attribut @deprecated de JSDoc. usejsdoc.org/tags-deprecated.html

1
votes

À ma connaissance, il n'existe aucun moyen intégré de le faire. Cependant, vous pouvez essayer d'alerter un développeur en utilisant la fonctionnalité ElementRef :

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

Sinon, si vous avez besoin de cette fonctionnalité pour être réutilisable et que vous souhaitez assurer la cohérence dans votre bibliothèque, vous pouvez créer un service injectable, comme celui-ci:

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) {
    if (elem.nativeElement.tagName.toLowerCase() === 'app-old-selector') {
      console.warn(`'app-old-selector' selector is deprecated; use 'app-new-selector' instead.`);
    }
  }
}

2 commentaires

mais ce moyen non réutilisable non j'ai besoin de copier ce code dans tous les sens 🙄🙄

Vous pourriez en faire un service injectable si vous en aviez besoin pour être réutilisable.

3
votes

J'ai écrit un décorateur réutilisable qui marque les sélecteurs de composants comme obsolètes.

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

Il ne nous reste plus qu'à décorer notre classe de composant avec cette fonction de décorateur avec un paramètre comme ci-dessous

XXX

Veuillez trouver le code ici sur stackblitz.

Veuillez également lire mon blog sur le même sujet qui a l'explication sur la logique.

0 commentaires