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

问题描述

我正在尝试创建一个 Angular.Dart 组件，它旨在成为一个多维数据集.

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

立方体的每一面都将包含它自己的内部 HTML，并且该组件的一个属性将设置哪一边是当前可见的一面.(一次只有一方处于活动状态)

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)

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

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?

这就是我想要创建的:

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

有可能吗?

谢谢

推荐答案

深入研究这个问题后，我发现答案是基于将内部立方体侧面注入立方体实例本身.

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.

这是通过如下标记CubeComponent来实现的:

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

这意味着 组件(它是 组件的父组件)通过提及可见性将自己暴露给它的每个子组件如NgDirective.CHILDREN_VISIBILITY).

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).

CubeSideComponent 定义了一个构造函数，它接收一个父 CubeController 作为参数，然后通过调用添加"方法:

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

}

这就是新的标记:

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

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