如何在 angular dart 组件中使用 *deferredContent 指令？

Question

我刚刚注意到新的 angular 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 的事件。

一些简单的问题：

你的 directives: const [ ...] 里有 DeferredContentDirective 吗？
您使用的是哪个版本的 AngularDart？

如何在 angular dart 组件中使用 *deferredContent 指令？

How to use the *deferredContent directives in angular dart components?

dart

angular-dart