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更改为您用于此组件的类的名称。

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

使用zone.run(...)，我们将语境明确地带回Angulars区域。

ngOnInit（）未在具有angular2的组件dart中调用

1 个答案: