ng-bootstrapのモーダル内のタブ要素にアクセスする

Question

ng-bootstrapをAngular 2で使用しています。@ViewChildを使用して、コンポーネントから変数#tabsにアクセスできません。これは、モーダルディレクティブ内でタブディレクティブを使用する場合にのみ発生します。ここに私のコードは次のとおりです。私は同じ問題に直面して

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

。 <テンプレート>要素を使用する場合、angleはこれを通常のDOM要素として扱わないため、ViewChildデコレータでアクセスすることはできません。私がやったことは、ダイアログの内容で新しいコンポーネントを作成し、このコンポーネントをmodalService.open（）に渡すことでした。例はhereです。

ヒント：私はあなたのモーダルが表示されていないと思います（とDOMに追加されません）あなたのモジュール