Comment sélectionner NgbTabset onglet actif sur la charge?
La "Sélectionnez un onglet actif par id" exemple à https://ng-bootstrap.github.io/#/components/tabs montre comment utiliser un DOM bouton de programmation pour sélectionner Angulaire de Bootstrap de l'onglet actif. Mais comment pouvez-vous définir un onglet à être active à partir de l'intérieur de la Machine a ecrire de code - par exemple par le référencement de certains état persistant de ce que l'onglet a été ouvert sur ce point de vue à l'aide d'un service stocké à l'état?
La activeId de la documentation sur cette page explique comment coder en dur d'un onglet à être actif, mais j'ai besoin de mettre l'onglet choix de la programmation. Je peux définir l'onglet [activeId] = getActiveId() (où getActiveId() accède à un service dans lequel je peux stocker la valeur de la tabulation), mais qui pénètre dans toutes sortes de problèmes avec lors de la activeId est définie, qui est probablement pourquoi la documentation dit "Utilisation de la commande "sélectionner" méthode pour passer d'un onglet par programme".
Suivant cette direction, j'ai essayé à l'aide de select sur le ngb-tabset et à l'aide de html événement onload pour résoudre ce dans les DOM, mais il était difficile de savoir où placer onload et je ne pouvais pas obtenir que cela fonctionne.
J'ai essayé d'utiliser ngOnInit dans le fichier d'enregistrement pour définir le DOM de l'état, mais ne pouvait pas comprendre comment reportez-vous à la ngb-tabset.
Ce qui est une bonne façon de coordonner les activités entre le Tapuscrit et les DOM pour sélectionner NgbTabset onglet actif sur la charge?
Le programme se compose de plusieurs points de vue. On a plusieurs onglets, et l'idée est que, lorsque les revenir à ce point de vue, le plus récemment utilisé l'onglet actif. Il semble que je suis censé utiliser select sur le ngb-tabset (je l'ai précisé et mis à jour des choses, j'ai essayé dans le post original) mais je n'ai pas réussi à obtenir que cela se produise.
OriginalL'auteur Mickey Segal | 2017-07-10
Vous devez vous connecter pour publier un commentaire.
J'ai compris comment faire ce travail, mais je suis indécis quant à savoir si c'est une encombrants solution ou une solution élégante.
J'ai fini par aller à l'encontre de l'avis au https://ng-bootstrap.github.io/#/components/tabs/api, qui dit que "l'Utilisation de la commande "sélectionner" méthode pour passer d'un onglet par programme". J'ai fait d'utiliser activeId, avec le code de base étant:
[activeId] se lie à une variable activeIdString, pas une méthode que j'ai décrit dans le post original (à l'aide d'un getActiveId() la méthode la place d'une variable de résultat "de l'Expression a changé après qu'il a été vérifiée" message d'erreur, qui bien que c'est un mode de développement plus seulement d'erreur, tel que décrit à https://github.com/angular/angular/issues/6005, est toujours un problème.)
La variable activeIdString est définie lorsque le composant initialise:
Puisque ce code est sur le composant avec les onglets, j'enregistre mostRecentTab sur ce composant et de le convertir à nextTab sur la navigation de la composante avant d'atteindre le composant avec des onglets, se débarrasser de la nécessité de prêter attention à exactement quand ngOnInit exécute par rapport à quand j'enregistre mostRecentTab.
Une discussion "Ne pouvez pas sélectionner l'onglet" à https://github.com/ng-bootstrap/ng-bootstrap/issues/1016 suggère aussi d'utiliser activeId, donc je me sens un peu confiance en négligeant les conseils sur https://ng-bootstrap.github.io/#/components/tabs/api à "Utilisation de la commande "sélectionner" méthode pour passer d'un onglet par programme".
OriginalL'auteur Mickey Segal
Je viens d'accomplir cette chose exacte avec la ngb-accordéon.
L'accordéon ressemble à ceci:
Je paramétrer l'onglet je veux afficher dans un Service de l'Etat (stateSvc) comme un fait Observable, et puis abonnez-vous pour cela dans mon composant, de sorte que lorsque je suis de naviguer à l'extérieur à partir d'un formulaire et que vous voulez revenir à la utilisateurs-gérer onglet pour exemple, j'ai mis stateSrv.c'.currentAccordianTab = 'utilisateurs-gérer", puis naviguez jusqu'à l'élément avec de l'accordéon.
@ViewChild me donne une référence à la ngb-accordéon dans le modèle par un modèle de référence (#acc)
Dans ma classe, j'ai ceci:
Sur le ngb-accordéon, il y a une bascule méthode qui prend un onglet id de paramètre de l'onglet actuel. Je devine que la méthode de sélection est l'équivalent sur le ngb-tabset, mais vous pouvez vérifier l'API doc.
Fondamentalement, nous faisons référence à la ngb-accordéon avec @ViewChild, puis en appelant sa fonction de bascule
this.acc.toggle('static-2');
pour définir l'état de l'correctement visible onglet.OriginalL'auteur Stephen R. Smith