3

Cube を意図した Angular.Dart コンポーネントを作成しようとしています。

立方体の各面には独自の内部 HTML が含まれ、このコンポーネントのプロパティによって、現在表示されている面がどの面であるかが設定されます。(一度に 1 つのサイドのみがアクティブになります)

私の質問は、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 に答える