Question

我正在使用Foundation 6框架开发Angular 4应用程序，用于样式和UI。其中，我正在使用其标签＆＃39;元素在同一个div上显示几页信息。要使其工作，应用程序必须运行$(document).foundation()来初始化所需的所有内容。问题是，在开始时，我使用＆＃39; Tabs＆＃39;使用*ngIf指令隐藏元素，并且仅在用户从列表中选择对象标识符时才显示该元素。要尝试修复它，当用户选择一个对象ID并加载该组件时，我从DB获取结果时运行以下代码：

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

此解决方案具有以下缺点：

每当我点击一个对象时运行代码，我会多次调用基础函数，从第二次开始收到此警告：

尝试初始化已有基础插件的元素的标签。
从理论上讲，运行“选择标签”＆＃39;功能应该选择所需的标签（在这种情况下为＆＃39; objectTab＆＃39;）并且它会在第一次选择＆＃39;标签＆＃39;元素显示我可以看到左边的标签（它是一个垂直标签），但右边没有任何数据应该是。选择另一个选项卡可使其完美运行。
一切都运行良好，直到我隐藏对象面板。当我这样做并再次双击对象ID时，我遇到了同样的问题（没有显示数据）。

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

我很确定问题来自于当DOM未完全加载时我调用基础功能这一事实（也许是因为＆＃39; Tabs＆＃39;元素在div内部使用＆＃39; * ngIf＆＃39;指令，仅在用户选择对象时显示。所以，我的问题是，当组件模板准备好显示时，是否有任何钩子被调用？这样，我会从它初始化基础，而不是从数据库中获取数据。

非常感谢，

Answer 1

我找到了一个使用'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>

干杯，

角度4生命周期钩为模板渲染

1 个答案: