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