dart - 使用 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

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

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

这是通过标记 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 的构造函数作为参数，然后通过调用“添加”方法将自身 (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>