2

使用 Angular Dart 5.2，我正在尝试探索如何将组件从变更检测中分离出来并进行手动检查，但未能成功。这是一个最小的例子：

app_component.dart

import 'package:angular/angular.dart';
import 'package:angular_change_detection/detached.dart';

@Component(
  selector: 'my-app',
  template: '''
    <h1>Angular change detection tests</h1>
    <detached></detached>
  ''',
  directives: [DetachedComponent],
)
class AppComponent {}

分离的.dart

import 'dart:async';
import 'dart:math' show Random;

import 'package:angular/angular.dart';

@Component(
  selector: 'detached',
  template: '''
    <span *ngFor="let i of internal">{{i}}, </span>
  ''',
  directives: [coreDirectives],
  changeDetection: ChangeDetectionStrategy.Detached
)
class DetachedComponent implements OnInit {
  final Random random = Random();
  final ChangeDetectorRef changeDetectorRef;

  List<int> internal = [];

  DetachedComponent(this.changeDetectorRef);

  @override
  void ngOnInit() {
    Timer.periodic(Duration(seconds: 1), (_) {
      internal = List.generate(random.nextInt(10) + 1, (i) => (DateTime.now().millisecondsSinceEpoch * (i + 1)) % 1337);
      print("Internal list changed: $internal}");
    });

    Timer.periodic(Duration(seconds: 3), (_) {
      changeDetectorRef.detectChanges();
      print("detecting changes; internal list reference: ${internal.hashCode}");
    });

  }
}

我的期望是分离组件的视图将每 3 秒更新一次，并使用新internal值。控制台日志反映internalList 每秒都会用新值创建新的值，我detectChanges()每 3 秒运行一次，但屏幕上没有任何变化。

我也尝试过的事情：

  • 手动将组件从构造函数的更改检测中分离 - 没有任何变化
  • 使用OnPush策略而markforCheck()不是detectChanges()- 按预期工作

所以问题是：如何将组件从变更检测中分离出来并在某些事件上手动触发它？

4

2 回答 2

1

您需要在运行更改检测之前附加

  • 重新连接
  • markForCheck()
  • 分离
于 2019-01-14T06:43:23.137 回答
0

使用OnPush策略和markforCheck()

这是手动触发变更检测的常用方法

于 2019-01-13T20:20:08.550 回答