在ng-bootstrap中訪問模態中的選項卡元素

我正在對Angular 2使用ng-bootstrap。我無法使用@ViewChild從我的組件中訪問#tabs變量。這隻發生在我使用模態指令內的tab指令時。這裏是我的代碼：在ng-bootstrap中訪問模態中的選項卡元素

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) {} 
}

來源

2017-01-30 in3pi2

的entryComponents陣列我猜你的模式是不可見的（而不是添加到DOM）。所以你不能訪問那個'＃tabs'，導致它現在不存在！ :) – mxii

是的，但是我能做些什麼來訪問組件中的＃＃標籤？ – in3pi2

我面臨着同樣的問題。當使用<模板>元素時，angular不會將其視爲普通DOM元素，因此您無法通過ViewChild裝飾器訪問它。我最終做的是創建一個帶有對話框內容的新組件，並將這個組件傳遞給modalService.open（）。一個例子可以看到here。

提示：不要忘了你的情態組分添加到您的模塊

來源

2017-03-20 14:45:42 Jay

在ng-bootstrap中訪問模態中的選項卡元素

回答

相關問題