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']);
}}

放在app根组件中：

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在页面加载时初始化，但是当我单击“加载”按钮时，testobj为null！为什么会发生这种情况以及如何使其正常工作？

另外：如何在飞镖中诊断类似的问题，是否有可能在课堂或场地上设置断点？我在dartium /

中找不到方法

Answer 1

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

如果您使用

providers: const[MyComp],

此提供程序将保存MyComp类的实例。这不是Angular组件，只是普通类的一个实例。 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();
  }
}

How can I select an element in a component template?提供了一些额外的解释。它适用于TypeScript，但大多数事情应该适用于较小的语法更改。

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

组件中的字段在ngOnInit和click事件之间变为null

1 个答案: