Question

我试图创建一个简单的组件来显示加载屏幕，直到数据到达并提供简单的错误处理：

<loading done="ctrl.dataLoaded" error="ctrl.dataError">
  <graph
      width="ctrl.graphWidth"
      data="ctrl.data">
  </graph>
</loading>

<loading>的模板如下所示：

<div ng-switch="cmp.error">
  <div ng-switch-when="null">
    <div ng-switch="cmp.done">
      <div ng-switch-when="false">
        <h1>Loading, please wait...</h1>
      </div>
      <div ng-switch-default>
        <content></content>
      </div>
    </div>
  </div>
  <div ng-switch-default>
  <h1>An Error occurred: {{cmp.error}}</h1>
  </div>
</div>

但是，被转换的<graph>组件仅在其属性上看到null而不是来自控制器的预期数据，因此无法呈现。

我认为这是因为它在<loading>的范围内呈现，原来的ctrl绑定不再可用了？有没有解决方法，保留原始属性绑定？

编辑：如下面的评论中所述，问题似乎来自于与<content>的转换相结合以及具有通过其属性接收数据的组件。只需转换{{ctrl.graphWidth}}这样的简单值即可。

edit2：根据要求，控制器

@NgController(
    selector: '[some-graph]',
    publishAs: 'ctrl')
class SomeGraphController implements NgAttachAware {
  bool dataLoaded = false;
  String dataError = null;
  int graphWidth = -1;
  List<Point> data;

  void attach() {
    requestData().then((d) {
      data = d;
      dataLoaded = true;
    }).catchError((e) => dataError = e.toString());
  }
}

和图表组件

@NgComponent(
    selector: 'graph',
    template: "<svg id='chart'></svg>",
    cssUrl: '/graph.css',
    publishAs: 'cmp')
class GraphComponent implements NgShadowRootAware {
  @NgOneWay('width')
  int width;

  @NgOneWay('data')
  List<Point> data;

  void onShadowRoot(ShadowRoot shadowRoot) {
    print('displaying $data');
    drawGraph(shadowRoot.querySelector("#chart"));
  }
}

print语句打印显示null＆＃39;当图形组件在加载组件中使用时，但在外部使用时正确打印从控制器分配的数据。

Answer 1

我不认为这是一个范围问题我试图在没有所有ng-switch标签的情况下重现并且图形从控制器获得了应用于<loading>祖先的值。

Answer 2

问题在于

<loading done="ctrl.dataLoaded" error="ctrl.dataError">
  <graph
      width="ctrl.graphWidth"
      data="ctrl.data">
  </graph>
</loading>

在传递给<graph>之前，会立即呈现

<loading>。此时，数据尚未出现（具有加载元素的点），因此图形在其属性中变为空并且无法呈现。稍后，当数据加载完毕并且<loading>组件更改其显示的内容时，不会再次渲染，则会显示首次渲染失败的结果。

可能的解决方案

每当所有必需属性都设置为非空值时呈现
有一个特殊的data-present属性，只有在设置为true时才会呈现

这两种方式都失败了<loading>标签的目的，还不确定我会做什么。完美的解决方案是懒惰评估，不确定AngularDart是否可以做到这一点？

使用<content> </content>呈现已转换内容时的范围问题

2 个答案: