So wählen Sie NgbTabset tab als aktiv laden?

Dem "Wählen Sie ein aktives tab-id" - Beispiel an https://ng-bootstrap.github.io/#/components/tabs zeigt, wie eine DOM-Taste, um programmgesteuert wählen Sie eine Eckige Bootstrap-Registerkarte aktiv sein. Aber wie legen Sie eine Registerkarte aktiv sein in den Typoskript-code - zum Beispiel, indem auf einen persistenten Zustand, was Registerkarte die zuletzt geöffnet wurde, auf diese Ansicht einen Dienst gespeichert Staat?

Den activeId Dokumentation auf dieser Seite wird erklärt, wie hard-code ein tab aktiv zu sein, aber ich brauche, um die Registerkarte Auswahl programmgesteuert. Ich kann das tab mit [activeId] = getActiveId() (wo getActiveId() den Zugriff auf einen Dienst, in dem ich speichern kann die tab-Wert), aber das wird in alle möglichen Probleme mit, wenn die activeId gesetzt, das ist vermutlich, warum die Dokumentation sagt, "Verwenden Sie die "select" - Methode zum schalten einer Registerkarte programmgesteuert".

Folgenden diese Richtung habe ich versucht mit select auf die ngb-tabset und mit dem html onload-Ereignis zu lösen, dieses in den DOM, aber unklar war, wo onload aus, und ich konnte nicht damit es funktioniert.

Versuchte ich mit ngOnInit in das Typoskript zum festlegen der DOM Stand, konnte aber nicht herausfinden, wie Sie beziehen sich auf die ngb-tabset.

Was ist ein guter Weg, um die Koordinierung zwischen dem Typoskript und dem DOM wählen Sie NgbTabset tab als aktiv laden?

Wenn Sie möchten wählen Sie eine Registerkarte aus? Bei der Initialisierung?
Das Programm besteht aus mehreren Ansichten. Man hat mehrere tabs, und die Idee ist, dass, wenn Sie zurück kommen in die Ansicht der zuletzt verwendeten Registerkarte aktiv sein wird. Es scheint, ich soll zu verwenden, wählen Sie auf dem ngb-tabset (habe ich geklärt und aktualisiert die Dinge habe ich versucht im original-post) aber ich habe nicht erfolgreich gewesen bekommen, dass passieren.

InformationsquelleAutor Mickey Segal | 2017-07-10

  1. 9

    Ich fand heraus, wie diese zu arbeiten, aber ich bin unschlüssig, ob es ein notdürftigem workaround oder eine elegante Lösung.

    Ich landete gegen den Rat bei https://ng-bootstrap.github.io/#/components/tabs/api, die sagte: "Verwenden Sie die "select" - Methode zum schalten einer Registerkarte programmgesteuert". Ich habe activeId, mit den core-code:

    <ngb-tabset [activeId]="activeIdString">

    [activeId] bindet eine variable activeIdString, nicht eine Methode wie ich es beschrieben in dem ursprünglichen Beitrag (mit einem getActiveId () - Methode statt einer Variablen Ergebnisse in der "Ausdruck hat sich verändert, nachdem es überprüft wurde" Fehlermeldung, obwohl es ist eine Entwicklung-Modus nur der Fehler, wie beschrieben, bei https://github.com/angular/angular/issues/6005, ist immer noch ein problem.)

    Die variable activeIdString wird gesetzt, wenn die Komponente initialisiert:

      ngOnInit(): void {
    this.activeIdString = this.tabNameString[this.personService.getNextTab()];
  }

    Da dieser code wird auf die Komponente mit den tabs, die ich aufzeichnen mostRecentTab auf diese Komponente und wandelt es in nextTab auf der Navigations-Komponente vor dem erreichen der Komponente mit tabs, loszuwerden, alle müssen die Aufmerksamkeit auf genau, wenn ngOnInit führt in Bezug auf wenn ich aufnehme mostRecentTab.

    Einer Diskussion "Nicht programmgesteuert wählen Sie die Registerkarte" https://github.com/ng-bootstrap/ng-bootstrap/issues/1016 schlägt auch mit activeId, so fühle ich mich auch etwas Vertrauen in Missachtung der Beratung auf https://ng-bootstrap.github.io/#/components/tabs/api "Verwenden Sie die "select" - Methode zum schalten einer Registerkarte programmgesteuert".

    InformationsquelleAutor Mickey Segal

  2. 1

    Habe ich nur erreicht, genau dieses Ding mit der ngb-Akkordeon.

    Das Akkordeon sieht so aus:

    <ngb-accordion #acc="ngbAccordion" activeIds="ngb-panel-0" [closeOthers]="true">

  <ngb-panel id="static-1" title="First panel">
    <ng-template ngbPanelTitle>
        <button type="button" class="btn" data-toggle="button">
               Tab One
         </button>
    </ng-template>
    <ng-template ngbPanelContent>
         Tab One Content
    </ng-template>
  </ngb-panel>

  <ngb-panel id="static-2" title="Second">
    <ng-template ngbPanelTitle>
        <button type="button" class="btn" data-toggle="button">
              Tab Two
         </button>
    </ng-template>
    <ng-template ngbPanelContent>
         Tab Two Content
    </ng-template>
  </ngb-panel>

</ngb-accordion>

    Ich die tab-ich, die angezeigt werden sollen in einen Zustand, Service (stateSvc) als einen Beobachtbaren, und dann bestellen Sie es in meine Komponente, also, wenn ich die Navigation Weg von einer form und will zurück zu der Benutzer-Registerkarte verwalten zum Beispiel, habe ich stateSrv.diese.currentAccordianTab = 'Benutzer verwalten' und dann navigieren Sie zu der Komponente mit dem Akkordeon.

    @ViewChild gibt mir einen Verweis auf die ngb-Akkordeon in der Vorlage von der Vorlage Referenz (#acc)

    In meiner Klasse, habe ich dieses:

    @ViewChild('acc') acc;

currentAccordianTab: string;

ngAfterContentInit() {
    this.stateSvc.currentTab$
        .subscribe(response => {
            this.currentAccordianTab = response;
            if (this.currentAccordianTab = 'users-manage') {
                this.acc.toggle('static-2');
            } else {
                this.acc.toggle('static-1');
            }
        });
}

    Auf dem ngb-Akkordeon, es gibt eine toggle-Methode mit einem tab-id-parameter der aktuellen Registerkarte. Ich vermute, dass die select-Methode ist das äquivalent auf dem ngb-tabset, aber Sie können überprüfen Sie die API-doc.

    Im Grunde genommen sind wir immer einen Verweis auf die ngb-Akkordeon mit @ViewChild, und dann den Aufruf der Umschaltfunktion this.acc.toggle('static-2'); der Zustand der richtig sichtbar tab.

    InformationsquelleAutor Stephen R. Smith

Schreibe einen Kommentar