选项卡动态组件在切换到下一个选项卡之前等待

Question

我正在使用自定义选项卡配置，但似乎在加载动态内容（选项卡窗格中的组件）时遇到问题。

组件加载promise/s或在init上做一些处理，切换到新标签时不会立即切换，而是等到组件初始化完成。

即：

{{#bs-tab customTabs=true as |tab|}}

    {{#bs-nav type="tabs" as |nav|}}
        {{#nav.item active=(eq tab.activeId "edit")}}<a href="#edit" role="tab" {{action tab.select "edit"}}>Edit</a>{{/nav.item}}

     {{/bs-nav}}

    {{#tab.pane elementId="edit" title="Edit"}}
       {{#if (eq tab.activeId "edit")}}
          <h2>TEST</h2>//->this does not show until some-component finishes initialization

          {{some-component}}//->does some processing, promises or whatever on init
      {{/if}}
    {{/tab.pane}}

{{/bs-tab}}

我尝试通过挂接到 onChange 事件手动设置和跟踪 activeId，但效果相同。

Answer 1

我不确定我是否正确理解了你的问题；但这是我对你的案子的看法。首先，组件的 init 方法在模板中呈现后立即运行，无论相关选项卡当前是否处于活动状态。这在应用程序性能方面是好的；因为即使选项卡不可见的组件的 init 方法也会启动运行。然而;您已经避免了以下情况！

   {{#if (eq tab.activeId "edit")}}

如果您使用这样的 if 语句，那么每次进行标签切换时；将渲染一个新组件，并销毁前一个选项卡中的组件！！！如果您在组件上做一些繁重的工作，那可能会让您很吃力；创建和销毁组件的成本很高。这样做之前请三思，确保这是您想要的！

如果在选项卡中完成组件初始化后要显示一些内容，您可以像往常一样使用 ember 操作。请看下面我为你准备的twiddle

在此示例中，application.hbs 包含两个选项卡，其中驻留两个不同的组件（my-component 和 my-component2）。 my-component init 方法在完成初始化之前等待 3 秒，而 my-component2 等待 10 秒。我已将 application.js 控制器上的相同操作 (componentAtTabDoneInitializing) 传递给两个组件，以便在每个组件完成初始化时通知控制器。 application 控制器通过这种方式跟踪哪个组件完成了初始化；因此你可以使用 if tab1FinishedInitializing, tab2FinishedInitializing flags within application.hbs.

选项卡动态组件在切换到下一个选项卡之前等待

tabs dynamic component waiting before switching to next tab

ember.js

ember-bootstrap