Question

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

有几种方法可以执行

之类的操作

List<ApplicationComponent> get applications每次都会创建一个新列表 String tabClassForMainSection(String section) Angular似乎不喜欢这样的代码（不确定这是否可行）可能是Angular中的Bug（https://github.com/angular/angular.dart/issues/738）。
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不再支持它的原因了。

我希望这有点帮助。

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

1 个答案: