1

假设我有一个组件：

@Component(selector: 'app-menu', 
    templateUrl: '.../menu.html', 
    cssUrl: const ['.../menu.css'], 
    publishAs: 'Menu')
class MenuComponent {

  bool showOptions = true;
  void toggleOptions() {
    showOptions = !showOptions;
  }
}

以及组件的视图：

<div class="menu" ng-click="Menu.toggleOptions()">
  <span icon="drawer"></span>
  <ul ng-show="Menu.showOptions" class="options">
    <!-- I want put content here -->
  </ul>
</div>

最后，用法（理论上）：

<app-menu>
  <menu-item>Remove</menu-item>
</app-menu>

运行程序后，我想查看<menu-item>Remove</menu-item>我放置的影子根目录<!-- I want put content here -->。我读过有一个<content />组件，但它不是那样工作的（什么也没发生，我只看到<output/>元素）。我也尝试过 ng-transclude 指令但没有成功。

有人可以帮助我并指出正确的方法吗？

4

1 回答 1

0

好吧，经过一些测试并查看 Angular Dart 教程后，我找到了解决方案。我上面的例子实际上并不准确。我使用了一个<li>元素而不是<menu-item>. 不知何故，当我将“li”更改为“span”时，它才开始工作。也许 DOM 解析器在将“li”元素附加到阴影根树内的正确结构之前已拒绝它。我真的不知道。然而，在更改后它开始工作。

于 2014-08-28T20:51:28.960 回答