テンプレートレンダリング用の角4ライフサイクルフック

Question

スタイリングとUI用のFoundation 6フレームワークを使用してAngular 4アプリケーションを開発しています。とりわけ、私は同じタブの情報のいくつかのページを表示するために、その 'Tabs'要素を使用しています。それを動作させるには、アプリケーションは必要なものをすべて初期化するために$(document).foundation()を実行する必要があります。問題は、最初に、 'Tabs'要素を使用するコンポーネントが*ngIfディレクティブで非表示になり、ユーザーがリストからオブジェクト識別子を選択した場合にのみ表示されることです。

$(function() { 
    $('#tabbed_element').foundation(); 
    $('#tabbed_element').foundation('selectTab', 'objectTab'); 
}); 

このソリューションには以下の欠点があります：

私はDBから結果を取得するときに、ユーザーがオブジェクトIDを選択し、コンポーネントがロードされたとき、私は次のコードを実行し、それを修正しようとする

• コードは、私は、オブジェクトをクリックして毎回実行されるように、私は二回目からこの警告を取得し、基礎関数に複数回呼び出す：

  はすでに財団を持っている要素のタブを初期化しようとしましたプラグイン。

• 理論的には、 'selectTab'関数を実行すると、必要なタブ（この場合は 'objectTab'）を選択する必要がありますが、最初に 'Tabs'要素が表示されますが、 （これは縦のタブですが）データはどこにあるのでしょうか。別のタブを選択すると完全に機能します。

• オブジェクトパネルを非表示にするまではすべて正常に動作します。私がこれをしてオブジェクトIDをもう一度ダブルクリックすると、同じ問題（データは表示されません）があります。

私は（そのようngAfterViewInit、ngAfterContentInitなどなど）は、すべての角度のライフサイクルのフックにコードを実行しようとしましたが、私はそれが動作しませんでした。

DOMが完全にロードされていないときに基底関数を呼び出しているという事実から問題が生じていることは間違いありません。おそらく、 'Tabs'要素は '* ngIf'ユーザーがオブジェクトを選択したときにのみ表示されます）。だから、私の質問は、コンポーネントのテンプレートを表示する準備ができているときに呼び出されるフックですか？このようにして、私はDBからデータを取得するのではなく、それから基礎を初期化します。

多くのおかげで、

Answer 1

は、私はこのような 'ngAfterViewChecked' フックを使用して解決策を見つけた：HTMLテンプレートで

@ViewChild('item_panel_tabs') itemTabsElement : ElementRef; 
private tabsInit : boolean = false; 

：

部品コードで

ngAfterViewChecked() { 
    // Check if the DOM has an element with template name 'item_panel_tabs' (obtained through ViewChild on the component's beginning) 
    if (this.itemTabsElement) { 
    // If the element exists, check if we have initialized it (this is done by running the foundation() function on the element) 
    if(!this.tabsInit) { 
     // If not, 1) call Foundation function 
     $(this.itemTabsElement.nativeElement).foundation(); 

     // 2) Change to the 'objectPanel' tab 
     $(this.itemTabsElement.nativeElement).foundation('selectTab', 'objectPanel'); 

     // And 3) Mark the component as initialized 
     this.tabsInit = true; 
    } 
    } 
    else { 
    // If the element doesn't exist in the DOM, mark it as uninitialized 
    this.tabsInit = false; 
    } 
} 

<ul class="vertical tabs" data-tabs id="item-panel-tabs" #item_panel_tabs> 
    <li class="tabs-title"><a href="#objectPanel"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Object</a></li> 
    <li class="tabs-title"><a href="#infoPanel"><i class="fa fa-info-circle" aria-hidden="true"></i> Info</a></li> 
</ul> 

乾杯、