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：< / p>

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

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

1 个答案: