使用6个模板参数创建Angular.Dart Cube组件

Question

我正在尝试创建一个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>

可能吗？

谢谢

Answer 1

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

这是一个概念上的改变 - 而不是使立方体本身的立方体参数，实际发生的是每个立方体的侧面在创建时将其自身添加到立方体。

这是通过将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）添加到多维数据集的sides-collection中：

@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>