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

Question

在我们的Angular-dart应用程序中，定义了一些组件(@NgComponent)。第一次显示这样的组件时，它会正确显示。从第二次开始，组件有时会显示在web应用程序中，有时则不会。调试表明，即使未显示，也会执行组件的代码。似乎没有发生异常/堆栈跟踪。在试图追踪问题时，我们让组件实现了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，你会得到一些异常)

有几种方法可以做一些事情，比如

• 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)中的一个Bug。

Map<String, ObjectData> asDataMap(List list) {每次被调用时都会返回一个新的集合。

也许你应该考虑一种不同的加载数据的策略。您可以将QueryService注入到组件中，并创建一个从组件调用的异步getApplications方法，如queryService.getApplications().then((data) => updateApplications(data));

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

我希望这会有一点帮助。