Получить доступ к элементу вкладки внутри модального окна в ng-bootstrap

Я использую ng-bootstrap с Angular 2. Я не могу получить доступ к переменной #tabs из моего компонента, используя @ViewChild. Это происходит только тогда, когда я использую директиву tab внутри модальной директивы. Вот мой код:

auth.component.html

<template #modal let-c="close" let-d="dismiss">
        <div class="modal-header">
            <h4 class="modal-title"></h4>
            <button type="button" class="close" aria-label="Close" (click)="close()">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            <ngb-tabset #tabs="ngbTabset" (tabChange)="changeTabs($event)">
                <ngb-tab title="Login" id="login">
                    <template ngbTabContent>
                        ...
                    </template>
                </ngb-tab>
                <ngb-tab title="Sign up" id="signUp">
                    <template ngbTabContent>
                       ...
                    </template>
                </ngb-tab>
            </ngb-tabset>                
        </div>
    </template>

auth.component.ts

import {Component, ViewChild} from '@angular/core';
import {NgbModal} from "@ng-bootstrap/ng-bootstrap";

@Component({
    moduleId: module.id,
    selector: 'st-auth',
    templateUrl: 'auth.component.html'
})

export class AuthComponent {

    /*
     * ------------ FIELDS -----------------
     */

    @ViewChild('modal') modal;
    private modalElement:any;

    @ViewChild('tabs') tabs;
    private tabsElement:any;


    /*
     * ------------ INITIALIZE -----------------
     */

    ngAfterViewInit() {
        this.modalElement = this.modal;
        this.tabsElement = this.tabs;

        console.log(this.tabs); //show 'undefined'
    }

    constructor(private modalService: NgbModal) {}
}

javascript angular bootstrap-4 ng-bootstrap
person in3pi2    schedule 30.01.2017    source источник
comment
Я предполагаю, что ваш модальный режим не виден (и не добавлен в DOM). Таким образом, вы не можете получить доступ к этому #tabs, потому что его сейчас нет! :)   -  person slaesh    schedule 30.01.2017
comment
Да, но что я могу сделать, чтобы получить доступ к #tabs из Компонента??   -  person in3pi2    schedule 31.01.2017

Ответы (2)


arrow_upward
1
arrow_downward

Я столкнулся с той же проблемой. При использовании элемента ‹ template > angular не рассматривает его как обычный элемент DOM, поэтому вы не можете получить к нему доступ через декоратор ViewChild. В итоге я создал новый компонент с содержимым диалога и передал этот компонент в modalService.open(). Пример можно увидеть здесь.

Совет: не забудьте добавить свой модальный компонент в массив entryComponents вашего модуля

person Jay    schedule 20.03.2017

arrow_upward
0
arrow_downward

Попробуйте использовать переменную active: boolean и функцию changeTabs() для изменения значения active, например:

HTML:

<tabset>
       <tab id="tab1" [disabled]="activeTab"  [active]="!activeTab">....</<tab>
       <tab id="tab2" [disabled]="!activeTab"  [active]="activeTab">....</<tab>
</tabset>
<button type="button" class="btn btn-success" (click)="changeTabs()"> ChangeTab</button>

TS

activeTab: boolean = false;

changeTabs(){
    this.activeTab= !this.activeTab;
}
person Gustavo Willian    schedule 21.05.2021