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)。
@ 987654332@ 每次被调用时都会返回一个新集合。

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

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

我希望这会有所帮助。