使用6个模板参数创建一个Angular.Dart Cube组件 [英] Creating an Angular.Dart Cube component with 6 template arguments

问题描述

我试图创建一个Angular.Dart组件，这是一个立方体。

多维数据集的每一侧都包含它自己的内部HTML，并且该组件的属性将设置哪个边是当前可见侧。 （一次只有一个边是活动的）

我的问题是 - 我如何创建一个组件接收6个模板参数，每个都将被插入作为特定的立方体内部HTML？

这是我要创建的：

 < cube> 
< sideA> A侧的内容< / sideA> 
< sideB> side B的内容>< / sideB> 
 ... 
< / cube> 
  

并且组件将是：

< pre class =lang-html prettyprint-override> < ul>
< li class =side-a> {{sideA}}< / li>
< li class =side-b> {{sideB}}< / li>
...
< / ul>


有可能吗？

/ p>

解决方案

深入这个问题后，我发现答案是基于将内侧立方体注入多维数据集实例本身。

这是一个概念上的改变 - 而不是使多维数据集本身的多边形参数，实际发生的是，

这是通过标记 CubeComponent 来实现的，如下所示： / p>

  @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-集合：

  @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> A侧的内容< / side> 
< side> B侧的内容< / side> 
 ... 
< / cube> 
  

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

解决方案

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>

这篇关于使用6个模板参数创建一个Angular.Dart Cube组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！