组件中的字段在 ngOnInit 和点击事件之间变为空

Question

典型组件：

@Component (
selector: 'mycomp',
template: '<div>mycomp</div>',
)
class MyComp implements OnInit {
String testobj;
void mymeth() {
  context.callMethod('alert', [testobj]);
}
@override
ngOnInit() {
  testobj = '123';
  context.callMethod('alert', ['initialized']);
}}

像这样放置在应用根组件中：

import 'mycomp_component.dart';
import 'package:angular/angular.dart';
@Component (
selector: 'testcomp',
template: '''
<button (click)="testModeler()">load</button>
<mycomp></mycomp>''',
providers: const[MyComp],
directives: const[MyComp],
)
class TestComponent {
MyComp myComp;
TestComponent(this.myComp);
void testModeler() {
  myComp.mymeth();
}}

testobj 在页面加载时初始化，但是当我单击 "load" 按钮时，testobj 为空！为什么会发生以及如何使其正常工作？

另外：如何诊断 dart 中的问题，是否可以在 class 或字段上设置断点？我在 dartium/

中找不到方法

Answer 1

Angular 为每个提供商创建一个实例。

如果你使用

providers: const[MyComp],

此提供程序将持有 MyComp class 的一个实例。这不会是一个 Angular 组件，只是普通 class 的一个实例。 Angular 不会调用 ngOnInit 因为它不是组件。此实例将传递给构造函数。

Angular 虽然为 <mycomp></mycomp> 创建了一个组件，并在此实例上调用了 ngOnInit。
这是提供商创建的另一个实例。

要获取模板中组件的引用，您可以使用 @ViewChild() 或 @ContentChild()

@Component (
  selector: 'testcomp',
  template: '''
    <button (click)="testModeler()">load</button>
    <mycomp></mycomp>''',
    directives: const[MyComp],
)
class TestComponent {
  @ViewChild(MyComp) MyComp myComp;

  TestComponent();

  void testModeler() {
    myComp.mymeth();
  }
}

提供了一些额外的解释。它适用于 TypeScript，但大部分内容都可以通过小的语法更改来工作。

https://webdev.dartlang.org/angular/guide 也应该包含一些信息。

组件中的字段在 ngOnInit 和点击事件之间变为空

Field in component becomes null between ngOnInit and click event

dart

angular-dart