dart - 如何在Angle Dart组件中使用* deferredContent指令？

Question

我刚刚注意到了新的角式 Dart 组件，所以我试图以这种方式使用它们:

  <material-expansionpanel-set>
      <material-expansionpanel *ngFor="let place of places" name="{{place.name}}" showSaveCancel="false">
        <div *deferredContent>{{place.name}}</div>
      </material-expansionpanel>
  </material-expansionpanel-set>

我期望div内的元素以不同的方式自动显示。它似乎无法理解它的工作原理:div中的语句永远不会显示(自然这只是一个测试，我打算将整个组件放在 * deferredContent div中。

这是我得到的html。

<material-expansionpanel-set _ngcontent-toa-2="">
      <!--template bindings={}--><material-expansionpanel _ngcontent-toa-2="" showsavecancel="false" _nghost-toa-10="">
<div _ngcontent-toa-10="" class="panel themeable open" role="group" aria-label="myplace" aria-expanded="true">


  <!--template bindings={}--><header _ngcontent-toa-10="" buttondecorator="" role="button" class="" aria-label="Close myplace panel" tabindex="0" aria-disabled="false">
    <div _ngcontent-toa-10="" class="panel-name">
      <p _ngcontent-toa-10="" class="primary-text">myplace</p>
      <!--template bindings={}-->

    </div>

    <div _ngcontent-toa-10="" class="panel-description">

    </div>

    <!--template bindings={}--><glyph _ngcontent-toa-10="" buttondecorator="" class="expand-button" role="button" _nghost-toa-11="" tabindex="0" aria-disabled="false"><i _ngcontent-toa-11="" aria-hidden="true" class="material-icons">expand_less</i></glyph>
  </header>

  <main _ngcontent-toa-10="" class="">
    <div _ngcontent-toa-10="" class="content-wrapper">
      <div _ngcontent-toa-10="" class="content">

        <!--template bindings={}-->

      </div>
      <!--template bindings={}-->
    </div>

    <!--template bindings={}--><div _ngcontent-toa-10="" class="toolbelt">

    </div>

    <!--template bindings={}-->
  </main>

</div>
</material-expansionpanel>
  </material-expansionpanel-set>

如果您的想法是实现DeferredContentAware并在组件可见时得到通知，那我会被欺骗(因为我们可以通过监听打开和关闭事件来手动完成此操作)

Answer 1

material-expansionpanel应该自动触发*deferredContent的事件。

一些简单的问题:

您的DeferredContentDirective中是否有directives: const [ ...]？

您正在使用什么版本的AngularDart？