Creating an Angular.Dart Cube component with 6 template arguments

问题

I'm trying to create an Angular.Dart Component, which is intended to be a Cube.

Each side of the cube will contain it's own inner HTML, and a property of this component will set which of the sides is the current visible side. (Only one of the sides is active at a time)

My question is - how can I create a component which receives 6 template-arguments, each of them will be inserted as a specific cube-side inner HTML?

This is what I want to create:

<cube>
   <sideA>Content of side A</sideA>
   <sideB>Content of side B></sideB>
   ...
</cube>

And the component will be something like:

<ul>
  <li class="side-a">{{sideA}}</li>
  <li class="side-b">{{sideB}}</li>
  ...
</ul>

Is it possible?

Thanks

回答1:

After diving deep into this question, I've found that the answer is based on injection of the inner cube-sides into the cube-instance itself.

This is a bit of a conceptual change - instead of making the cube's sides arguments of the cube itself, what actually happens is that each of the cube's sides adds itself to the cube when it is created.

That is achieved by marking the CubeComponent as following:

@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);
  }
}

which means that <cube> component (which is a parent of <side> components) is exposing itself to each of it's children, by mentioning the visibility as NgDirective.CHILDREN_VISIBILITY).

The CubeSideComponent defines a constructor which receives a parent CubeController as an argument, and then adds itself (this) to the sides-collection of the cube, by invoking the 'add' method:

@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);
  }

}

and that is the new markup:

<cube>
    <side>Content of side A</side>
    <side>Content of side B</side>
    ...
</cube>

来源：https://stackoverflow.com/questions/20723174/creating-an-angular-dart-cube-component-with-6-template-arguments

标签

dart

angular-dart