3

我正在尝试创建一个 Angular.Dart 组件，它旨在成为一个多维数据集。

立方体的每一面都将包含它自己的内部 HTML，并且该组件的属性将设置哪个面是当前可见面。（一次只有一侧处于活动状态）

我的问题是 - 如何创建一个接收 6 个模板参数的组件，每个模板参数都将作为特定的立方体侧内部 HTML 插入？

这就是我想要创建的：

<cube>
   <sideA>Content of side A</sideA>
   <sideB>Content of side B></sideB>
   ...
</cube>

该组件将类似于：

<ul>
  <li class="side-a">{{sideA}}</li>
  <li class="side-b">{{sideB}}</li>
  ...
</ul>

可能吗？

谢谢

4

1 回答 1

2

在深入研究这个问题之后，我发现答案是基于将内部立方体侧面注入立方体实例本身。

这是一个概念上的变化——而不是将立方体的边作为立方体本身的参数，实际发生的是立方体的每个边在创建时将自身添加到立方体中。

这是通过标记CubeComponent如下来实现的：

@NgComponent(
    visibility: NgDirective.CHILDREN_VISIBILITY,
    selector: 'cube',
    templateUrl: '../../lib/cube/cube_component.html',
    cssUrl: '../../lib/cube/cube_component.css',
    publishAs: 'ctrl'
)
class CubeComponent {

  var sides = new List<CubeSideComponent>();

  add(CubeSideComponent side) {
    sides.add(side);
  }
}

这意味着<cube>组件（它是组件的父<side>组件）通过将可见性提及为NgDirective.CHILDREN_VISIBILITY）将自己暴露给它的每个子组件。

定义了一个构造函数，CubeSideComponent它接收一个父对象CubeController作为参数，然后通过调用“add”方法将自己（this）添加到多维数据集的边集合中：

@NgComponent(
    selector: 'side',
    templateUrl: '../../lib/cube/cube_side_component.html',
    cssUrl: '../../lib/cube/cube_side_component.css',
    publishAs: 'ctrl',
)
class CubeSideComponent {

  CubeSideComponent (CubeComponent cube) {
    cube.add(this);
  }

}

这就是新的标记：

<cube>
    <side>Content of side A</side>
    <side>Content of side B</side>
    ...
</cube>
于 2013-12-27T17:56:17.690 回答