dart - Angular-dart 组件并不总是显示在网络应用程序中

Question

在我们的 Angular-dart 应用程序中，定义了一些组件 (@NgComponent)。第一次显示这样的组件时，它会正确显示。从第二次开始，有时组件会显示在网络应用程序中，有时不会。调试表明，即使未显示，也会执行组件的代码。似乎没有发生异常/堆栈跟踪。在尝试追踪问题时，我们让组件实现 NgShadowRootAware 并添加方法 void onShadowRoot(ShadowRoot shadowRoot) {}。每次在 onShadowRoot 方法中放置断点时，组件都会正确显示。移除断点后，大多数情况下组件 html 不会显示在 Web 应用程序中。

显然，调整(多次)浏览器窗口的大小似乎可以使组件显示出来。

view_objectdata_component.dart

library view_objectdata_component;

import 'package:angular/angular.dart';
import 'dart:html';
import '../model/model.dart';


@NgComponent(
    selector: 'view-objectdata',
    cssUrl: '../lib/component/view_objectdata_component.css',
    templateUrl: '../lib/component/view_objectdata_component.html',
    publishAs: 'cmp'
)
class ViewObjectDataComponent implements NgShadowRootAware {

  @NgTwoWay('objectdata-map')
  Map<String, ObjectData> dataMap;  
  @NgTwoWay('readonly')
  bool readonly = true;  

  @NgTwoWay('editLink')
  String theEditLink;  

  String _id;

  ViewObjectDataComponent(RouteProvider routeProvider) {
    _id = routeProvider.parameters['id'];
  }

  bool get hasEditLink => theEditLink != null;
  String get editLink => theEditLink.replaceAll('<id>', _id);

  ObjectData get data  {
    ObjectData val = dataMap[_id];
    return val;
  }

  List<ObjectAttribute> get attributes {
    List<ObjectAttribute> list = [];
    for (ObjectAttribute simAtt in data.attributes.values) {
      list.add(simAtt);
    }
    return list;
  }

  void onShadowRoot(ShadowRoot shadowRoot) {
    shadowRoot.querySelector('#myDiv').children.add(
        new SpanElement()..text = ''
    );
  }
}

view_objectdata_component.html

<div id='myDiv'>
  <h3>{{cmp.data.getAttVal('Name')}}</h3>
    <div><strong>ID: </strong>{{cmp.data.id}}</div>
    <ul>    
      <li ng-repeat="att in cmp.attributes">
         <view-attributevalue objectattribute="att" readonly="cmp.readonly"></view-attributevalue>
      </li>
    </ul>
  <span ng-if="cmp.hasEditLink">    
    <a class="extra-space" href="{{cmp.editLink}}">
      <input type="button" value="Edit">
    </a>
  </span> 
</div>

调用者:

{{ctrl.changeMainSection('applications')}}
<div>
 <br/>
 <div class="alert alert-info alert-dismissable fade in">         
  <view-objectdata 
    objectdata-map="ctrl.asDataMap(ctrl.applications)" editLink="'#/appComp/<id>/edit'"        
  >   
  </view-objectdata>
  </div>
</div>

Answer 1

我认为当您的数据(应用程序)从 queryService 异步加载时，此更新不会触发整个依赖链。当您有一个断点时，加载数据同时完成，然后显示所有内容。如果您没有断点，Angular 将完成渲染并且无法识别数据更改。

您的代码中有一些 Angular 不喜欢的模式可能会导致此行为。(如果你升级到 Angular 0.9.9 你会得到一些异常(exception))

有几种方法可以做类似的事情

• https://github.com/angular/angular.dart/issues/641
• https://github.com/angular/angular.dart/issues/633
• https://github.com/angular/angular.dart/issues/705
• https://github.com/angular/angular.dart/issues/715

List<ApplicationComponent> get applications每次都创建一个新列表。
String tabClassForMainSection(String section) Angular 似乎不喜欢这样的代码(不确定这是否应该工作)可能是 Angular 中的一个错误(https://github.com/angular/angular.dart/issues/738)。
Map<String, ObjectData> asDataMap(List list) {每次调用时都会返回一个新集合。

也许您应该考虑采用不同的策略来加载数据。您可以将 QueryService 注入(inject)组件并进行异步 getApplications您从组件调用的方法，例如 queryService.getApplications().then((data) => updateApplications(data));

当您查看我在此处发布的调试输出时 https://github.com/angular/angular.dart/issues/738你会看到 Angular 调用方法检查数据更新的频率。如果每次都创建一个新的集合，效率很低。这就是 0.9.9 不再支持它的原因。

希望对您有所帮助。