3
votes

Comment récupérer un paramètre d'itinéraire en utilisant Injector.get (ActivatedRoute)?

Je suis nouveau sur Angular. Mon objectif est d'avoir un BaseDetailComponent qui peut être étendu par des composants "detail" (ceux qui montrent les champs d'un seul objet de données). Étant donné que le constructeur de la classe parent recevra une instance de service et d'autres paramètres, je ne peux pas utiliser l'injection de dépendance normale dans le constructeur. Par conséquent, je dois injecter manuellement l'injecteur d'application dans BaseDetailComponent. J'ai essayé le code ci-dessous. Il existe un InjectorManager, dont l'injecteur est défini par l'AppModule global. Ensuite, BaseDetailComponent récupère l'injecteur d'InjectorManager et l'utilise pour obtenir l'instance ActivatedRoute de l'application. Mais, pour une raison quelconque, enabledRoute.snapshot.params.id n'est pas défini. Et c'est mon problème. J'ai besoin d'accéder aux paramètres de route sur une classe où l'injection de dépendance de constructeur ordinaire n'est pas disponible.

export class InjectorManager {

  private static _injector: Injector;

  static get injector(): Injector {
    return this._injector;
  }

  static set injector(value: Injector) {
    this._injector = value;
  }
}

export class AppModule {

  constructor(
    injector: Injector
  ) {
    InjectorManager.injector = injector;
  }
}

@Component({template: ''})
export class BaseDetailComponent {

  protected activatedRoute: ActivatedRoute;

  constructor(
    private service: BaseService<DtoType>
  ) {
    this.activatedRoute = InjectorManager.injector.get(ActivatedRoute);
  }

  ngOnInit() {

    this.service.findById(this.activatedRoute.snapshot.params.id)
      .subscribe(...);
  }
}

angular

2 commentaires

Au lieu d'utiliser enabledRoute.snapshot , vous pouvez essayer de vous abonner à enabledRoute.params .

Je l'ai essayé, mais cela n'a pas fonctionné. Voir ci-dessous.

3 Réponses :

2
votes

Premièrement, vous pouvez injecter ActivatedRoute simplement en le plaçant dans les paramètres du constructeur.

this.activatedRoute.params.pipe(switchMap(({id}) => this.service.findById(id)).Subscribe(...)

Deuxièmement, vous devez vous abonner à this.activatedRoute.params car il peut changer après l'initialisation du composant:

constructor(
    private service: BaseService<DtoType>,
    protected activatedRoute: ActivatedRoute;
) {}

4 commentaires

Étant donné que BaseDetailComponent va être étendu, le constructeur ne peut pas avoir de paramètre ActivatedRoute. Sinon, les classes enfants devraient envoyer cela, ce qui entraînerait un code répété inutile. Pour une raison quelconque, votre suggestion (pipe et switchMap sur les paramètres Observable) ne fonctionne pas. this.activatedRoute.params .pipe (switchMap ((params: Params) => {return this.service.findById (params ['id']);})) .subscribe (...

Êtes-vous sûr de devoir récupérer les paramètres d'itinéraire? Peut-être que vous voulez dire les paramètres de requête? À quoi ressemble votre demande?

Stanisalv, merci d'être resté avec moi contre ce mystère! Ma requête est un HTTP GET contre localhost: 4200 / restaurant-detail / 3 . J'essaie de récupérer ce "3", mais je ne peux pas utiliser l'injection dépendante angulaire régulière (paramètre du constructeur) car il s'agit de composants génériques à étendre.

semble être un paramètre d'itinéraire, mais quelle est votre configuration de routage alors?

0
votes

Pour obtenir les paramètres d'itinéraire, abonnez-vous sur enabledRoute.params.subscribe ((data) => {ur code}) Ici, les données contiendront les paramètres. supposons que votre inscription soit chemin: abc /: id Ensuite, les paramètres conatin id propriété.

1 commentaires

J'ai essayé, mais pour une raison quelconque, cela ne fonctionne pas. `this.activatedRoute.params .pipe (switchMap ((params: Params) => {return this.service.findById (params ['id']);})) .subscribe (`

2
votes

Il s'agit d'une question similaire à Les composants parents obtiennent des paramètres vides d'ActivatedRoute .

La documentation Angular pour ActivatedRoute indique (je souligne):

Contient les informations sur un itinéraire associé à un composant chargé dans une prise.

Il existe également un problème de demande de fonctionnalité sur le GitHub d'Angular repo demandant une solution, qui déclare (je souligne):

Lors de l'utilisation d'une route paramétrée qui cible un composant, seul ce composant peut accéder à ces paramètres .

Ainsi, vous rencontrez un comportement attendu. Un commentaire sur ce problème indique que chaque composant reçoit sa propre ActivatedRoute ( cela ne fonctionne pas en singleton comme les autres classes injectées).

Sur ce même problème GitHub, la solution proposée est d'injecter un Router et vérifiez les événements NavigationEnd :

router.events.filter(e => e instanceof NavigationEnd).forEach(() => {
  // inspect the state on router.routerState
})

Pour un exemple complet, vérifiez le fichier src / app.ts sur ce plunkr fourni par @brandonroberts sur le problème GitHub: http://plnkr.co/edit/pHd89K?p=preview

0 commentaires