Question

是否可以创建可用作表格行（或tbody）的Angular Dart组件？我想做这样的事情：

<table>
  <my-component ng-repeat="value in ctrl.values" param="value"></my-component>
</table>

而不是很难看：

<table>
  <tr ng-repeat="value in ctrl.values"> ...(here some td's)...</tr>
</table>

如果没有，有什么方法可以实现类似的目标吗？

谢谢，

罗伯特

Answer 1

这是你在找什么？

library main;

import 'package:angular/angular.dart';
import 'package:di/di.dart';

class Item {
  String name;
  Item(this.name);
}

@NgComponent(
    selector: 'tr[is=my-tr]',
    publishAs: 'ctrl',
    visibility: NgDirective.CHILDREN_VISIBILITY,
    applyAuthorStyles: true,
    template: '''<content></content><span>{{ctrl.value.name}}</span><span> - </td><td>{{ctrl.value}}</span>'''
)
class MyTrComponent extends NgShadowRootAware{
  @NgTwoWay('param') Item value;

  MyTrComponent() {
    print('MyTrComponent');
  }

  @override
  void onShadowRoot(ShadowRoot shadowRoot) {
    var elements = new List<Element>.from(shadowRoot.children.where((e) => !(e is StyleElement) && !(e is ContentElement)));
    ContentElement ce = shadowRoot.querySelector('content');
    elements.forEach((e) {
      e.remove();
      var td = new TableCellElement();
      td.append(e);
      print('append: ${e.tagName}');
      ce.append(td);
    });
  }
}

@NgController(
  selector: "[ng-controller=row-ctrl]",
  publishAs: "ctrl",
  visibility: NgDirective.CHILDREN_VISIBILITY
)
class RowController {
  List<Item> values = [new Item('1'), new Item('2'), new Item('3'), new Item('4')];
  RowController() {
    print('RowController');
  }
}

class MyAppModule extends Module {
  MyAppModule() {
    type(MyTrComponent);
    type(RowController);
  }
}

void main() {
  ngBootstrap(module: new MyAppModule());
}

<!DOCTYPE html>

<html ng-app>
  <head>
    <meta charset="utf-8">
    <title>Angular playground</title>
    <link rel="stylesheet" href="index.css">
  </head>
  <body>
    <h1>Angular playground</h1>

    <p>Custom TableRow</p>

    <table ng-controller="row-ctrl"  >
      <tr is="my-tr" ng-repeat="value in ctrl.values" param="value"></tr>
    </table>

    <script type="application/dart" src="index.dart"></script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>

使用其他标记名称<my-component>是不可能的，因为<table>不会接受此类标记作为内容，因此我调整了聚合物如何使用选择器'tr[is=my-tr]'定义扩展DOM元素。在Angular中，只要标记名称为tr，其他选择器就可以。

您可以在此GitHub repo - angular_playground

中找到项目的源代码

结果屏幕截图

Screenshot of the result

是否可以为单个表行创建组件？

1 个答案: