Question

假设我有一个组件：

@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>，我放。我已经读过有一个<content />组件，但它没有那样工作（没有发生任何事情，我只看到<output/>元素）。我也尝试过ng-transclude指令但没有成功。

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

Answer 1

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

将子项插入Angular Dart组件（阴影根）

1 个答案: