如何在角落飞镖组件中使用* deferredContent指令?

时间:2017-02-09 16:43:14

标签: dart 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中。< / p>

这是我得到的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并在组件可见时得到通知,我会被欺骗(因为我们可以通过监听打开和关闭事件来手动完成)

1 个答案:

答案 0 :(得分:2)

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

一些简单的问题:

  • 您的DeferredContentDirective中有directives: const [ ...]吗?

  • 您使用的是哪种版本的AngularDart?