javascript - 访问 ng-bootstrap 中模态框内的选项卡元素

Question

我在 Angular 2 中使用 ng-bootstrap。我无法使用 @ViewChild 从我的组件访问 #tabs 变量。仅当我在模态指令内使用 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) {}
}

Answer 1

我也遇到了同样的问题。当使用