Jquery 用于模板渲染的Angular 4生命周期挂钩 我开发了一个角度4的应用程序，它使用了基础6框架，用于样式和UI。其中，我使用它的“选项卡”元素来显示同一div上的几页信息。为了使它有效，应用程序必须运行$Digial.Funt初始化所有需要的东西。问题在于，在开始时，我使用“Tabs”元素的组件使用*ngIf指令隐藏，并且仅当用户从列表中选择对象标识符时才会显示。 为了尝试修复它，当用户选择一个对象ID并加载组件时，当我从DB获得结果时，我运行以下代码： $(function() { $('#tabbed_element').foundation(); $('#tabbed_element').foundation('selectTab', 'objectTab'); });

此解决方案有以下缺点：

当每次单击一个对象运行代码时，我多次调用基础函数，从第二次得到这个警告：

试图初始化一个已经有基础插件的元素的选项卡。

理论上，在本例中，运行“selectTab”功能应选择所需的选项卡“objectTab”，但在第一次显示“Tabs”元素时，我可以看到左侧的选项卡是垂直选项卡，但右侧没有任何选项卡，数据应在其中。选择另一个选项卡可以使其完美工作

在我隐藏对象面板之前，一切正常。当我这样做并再次双击一个对象id时，我遇到了同样的问题，没有显示数据

我曾尝试在所有的Angular生命周期挂钩（如ngAfterViewInit、ngAfterContentInit等）中运行代码，但无法使其正常工作

<> P>我确信问题是因为当DOM没有完全加载时，我调用基础函数，可能是因为“标签”元素在一个带有'*nGIF '指令的div内，只有当用户选择一个对象时才显示。所以，我的问题是，当组件模板准备好显示时，是否有任何钩子被调用？这样，我就从它开始基础，而不是当我从DB获得数据时。

---

非常感谢，

我找到了一个使用“ngAfterViewChecked”钩子的解决方案，如下所示：

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;
  }
}

在组件代码中：

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

在HTML模板中：

<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>

干杯