如何在角省道组件中使用延迟内容指令？

Question

我刚刚注意到了新的角飞镖组件，所以我试图这样使用它们：

  <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自动触发事件。

一些简单的问题：

• 你的directives: const [ ...]里有directives: const [ ...]吗？
• 您使用的是什么版本的AngularDart？