Question

我在Angular 2中使用ng-bootstrap。我无法使用#tabs从我的组件访问@ViewChild变量。这只发生在我在modal指令中使用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

我遇到了同样的问题。当使用＆lt;模板＆gt; element，angular不会将其视为普通的DOM元素，因此您无法通过ViewChild装饰器访问它。我最终做的是使用对话框内容创建一个新组件，并将此组件传递给modalService.open（）。可以看到一个例子here。

提示：不要忘记将模态组件添加到模块的entryComponents数组中

Answer 2

尝试使用变量“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;
}

访问ng-bootstrap中模式内的tab元素

2 个答案: