Travailler avec Foundation 6 en Angular 2

Question

Comme je sais que je devrais mettre $ (this.elementRef.nativeElement) .foundation() dans chaque composant quand je veux utiliser la fondation. Mais je ne pouvais pas comprendre dans quelle partie je devrais le faire.

Par exemple, j'ai besoin d'utiliser la liste déroulante sur le vol stationnaire. Les crochets angulaires tels que AfterViewInit ou AfterContentInit n'aident pas dans ce cas.

Comme solution que je devrais utiliser setTimeout:

setTimeout(() => { 
    $(this.elementRef.nativeElement).foundation(); 
}, 5000); 

Y at-il une autre bonne solution pour cette tâche?

P.S $ (document) .foundation() ne fonctionne pas non plus.

Answer 1

Comme je l'ai pas trouvé de solution de travail pour la fondation javascript et angulaire 2 fonctionne correctement, je suis coincé avec dans mon composante principale/App

export class MainComponent implements OnInit { 

    private _router: Router; 

    constructor(router: Router) { 
     this._router = router; 
    } 

    public ngOnInit() { 
     this._router.events.subscribe((event: any) => { 
      if(event instanceof NavigationEnd) { 
       jQuery(document).foundation(); 
      } 
     }); 
    } 
} 

Cela fonctionne pour les choses les plus simples. Foundation Orbit a quelques problèmes avec cet usage. J'espère toujours, que Zurb révélera Foundation Apps 2 bientôt, afin que Foundation Sites JavaScript puisse être remplacé par des directives Angular 2 natives.

Pour votre question, vous pouvez vérifier si vous ajoutez $(this.elementRef.nativeElement).foundation() dans le ngOnInit() de vos travaux composants. Le mieux serait d'utiliser quelque chose comme new Foundation.Dropdown(this.elementRef.nativeElement); dans ngOnInit() mais je n'ai pas aussi obtenu ce pour fonctionner correctement. Peut-être que certains des conseils peuvent vous aider à créer une solution de travail. Aimeriez-vous entendre si vous pouvez le faire fonctionner.