ngOnInit() 未在带有 angular2 的组件飞镖中调用

Question

我有一个 app_component.dart 调用此函数

class OtherComponent {
  // ChromeCast receveiver event handler
  onLoad() { 
    this.router.navigate(["/Video", { 'pageData': pageData}]);
  }
}

加载另一个名为 video_component.dart 的 dart 组件。

import 'package:angular2/angular2.dart';
import 'package:angular2/common.dart';
import 'package:angular2/router.dart';
import 'dart:js';
import 'dart:html';


@Component(selector: 'video-container', templateUrl: '../../views/video_component.html', directives: const [NgFor])
class VideoComponent implements OnInit {

  @Input()
  ContentService contentService;

  LoggerService log;

  String progress;

  RouteParams routeParams;

  var pageData;

  VideoComponent(@Inject(ContentService) this.contentService, @Inject(LoggerService) this.log, this.routeParams) {
    log.info('constructor called'); // <== constructor is called
  }

  @override
  ngOnInit() {
    log.info('ngOnInit:Load video page with content Id');
    //not called
  }
}

为什么 ngOnInit() 没有被调用？

Answer 1

尝试

NgZone zone;
ParentComponent(this.zone);

onLoad(event) {
  zone.run(() => this.router.navigate(...)
}

我假设 ParentComponent 是包含事件处理程序 onLoad(event) ... 的组件，它是构造函数，用于注入 NgZone，就像您在问题代码中对 ContentService 和 LoggerService 所做的那样。将 ParentComponent 更改为您用于此组件的 class 的名称。

ChromeCast 的 onLoad() 似乎未从 Angular 修补，因此运行不在 Angular 区域。现在，当从 Angulars 区域外的代码调用事件处理程序时，某些事情不再起作用（例如更改检测）。

使用 zone.run(...) 我们将上下文显式地带回 Angular 区域。

ngOnInit() 未在带有 angular2 的组件飞镖中调用

ngOnInit() not called in a component dart with angular2

dart

angular2-routing

angular