10 votes

Puis-je exécuter une méthode de composant uniquement dans le client en utilisant Angular2 Universal ?

Je suis en train d'écrire un angulaire2 universel app. Elle dispose d'un d3 mais j'espérais rendre le graphique d3 uniquement du côté client (navigateur) et ne pas essayer de le rendre sur le serveur. Existe-t-il une interface dans angular2 universal qui permet d'exécuter une méthode de composant uniquement du côté client ?

c'est-à-dire

class ComponentWithChart implements OnInit, ngUniversalBrowser {

  elem;

  constructor( private viewContainerRef:ViewContainerRef) {}

  ngUniversalBrowserOnInit() {

    this.elem = this.viewContainerRef.element.nativeElement;

    d3.select(this.elem).append('div').style({
      'background-color':'yellow'
    });
  }
}

Existe-t-il quelque chose, comme l'exemple ci-dessus, qui pourrait me permettre de n'exécuter que la fonction ngUniversalBrowser uniquement dans le navigateur OnInit ?

4voto

hex Points 420
import { isBrowser } from 'angular2-universal';

isBrowser est un booléen que vous pouvez importer dans votre composant et ainsi exécuter le code de manière codifiée uniquement s'il est exécuté sur le client.

if (isBrowser) {
     // this will not run on server
}

1voto

Ralph N Points 911

Je crois que j'ai une réponse. Mais c'est un piratage complet, et je suis sûr qu'ils n'avaient pas l'intention de vous faire faire ça.

Je me suis moi-même retrouvé dans une impasse (qui m'a obligé à désactiver angular-universal/prerendering). Ma perte pourrait être votre gain.

Il y a des objets particuliers qui ne sont pas disponibles lorsque vous faites du pré-rendu. Principalement, "window", c'est-à-dire, "document.window".

Pourquoi n'essayez-vous pas d'ajouter une instruction conditionnelle dans votre composant qui vérifie si l'objet existe. Si ce n'est pas le cas, chargez votre fond jaune. Sinon, chargez normalement.

Je ne suis pas sûr que cela signifie que votre composant ne se rafraîchira pas lorsque le "vrai" client aura fini de se charger. Mais je suis sûr que vous pouvez configurer quelque chose pour surveiller la "fenêtre" et faire en sorte que cela se produise.

ngInit() {  
    if (!window) {
      // yellow background placeholder
    } else
      // real plumbing
    }
}

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X