Question

我有一个嵌套的子组件，如下所示：

<app-main>
    <child-component />
</app-main>

我的appMain组件需要调用子组件上的方法。

如何在子组件上调用方法？

Answer 1

您可以使用

获取对元素的引用

...
[info] Starting scala interpreter...

scala> import biz.neumann.NiceUUID._
import biz.neumann.NiceUUID._

scala> "9ecce884-47fe-4ba4-a1bb-1a3d71ed6530".uuid
res0: scala.util.Try[java.util.UUID] = Success(9ecce884-47fe-4ba4-a1bb-1a3d71ed6530)

其中@ViewChild('childComponent') child;是模板变量childComponent＆gt;`或

<some-elem #childComponent

其中@ViewChild(ComponentType) child;是组件或指令的类型，然后在ComponentType或事件处理程序中调用ngAfterViewInit。

child.someFunc()

另见get hold of an element in the template

Answer 2

父母和孩子可以通过数据绑定进行交流。

示例：

@Component({
    selector: 'child-component',
    inputs: ['bar'],
    template: `"{{ bar }}" in child, counter  {{ n }}`
})
class ChildComponent{
    constructor () {
        this.n = 0;
    }
    inc () {
        this.n++;
    }
}

@Component({
    selector: 'my-app',
    template: `
        <child-component #f [bar]="bar"></child-component><br>
        <button (click)="f.inc()">call child func</button>
        <button (click)="bar = 'different'">change parent var</button>
    `,
    directives: [ChildComponent]
})
class AppComponent {
    constructor () {
        this.bar = 'parent var';
    }
}

bootstrap(AppComponent);

Demo

#f创建对子组件的引用，可以在模板中使用或传递给函数。来自父级的数据可以通过[ ]绑定传递。

Answer 3

作为儿子组成部分

@Component({
    // configuration
    template: `{{data}}`,
    // more configuration
})
export class Son {

  data: number = 3;

  constructor() { }

  updateData(data:number) {
    this.data = data;
  }

}

拥有父组件

@Component({
    // configuration
})
export class Parent {
  @ViewChild(Son) mySon: Son;

  incrementSonBy5() {
    this.mySon.updateData(this.mySon.data + 5);
  }
}

在父亲的模板中

<son></son>
<button (click)="incrementSonBy5()">Increment son by 5</button>

此解决方案仅适用于父模板中的一个<son></son>实例。如果您有多个实例，则只能在模板的第一个实例中使用。

Answer 4

访问子组件的最佳方法是@ViewChild。

假设你的AppMainComponent带有一个嵌套的ChildComponent。

// app-main.component.ts
import { Component } from '@angular/core';

@Component({
    selector: 'app-main',
    template: `
        <child-component />
    `
})

export class AppMainComponent {}

您想从ChildComponent调用clear方法。

// child.component.ts
import { Component } from '@angular/core';

@Component({
    selector: 'child-component',
    template: '{{ greeting }}'
})

class ChildComponent {
    greeting: String = 'Hello World!';

    clear() {
        this.greeting = null;
    }
}

您可以通过导入ChildComponent类，ViewChild装饰器并将组件的类作为查询传递来完成它。这样，您就可以访问存储在自定义变量中的ChildComponent接口。这是一个例子：

// app-main.component.ts
import { Component, ViewChild } from '@angular/core';
import { ChildComponent } from './components/child/child.component';

@Component({
    selector: 'app-main',
    template: `
        <child-component />
    `
})

class ChildComponent {
    @ViewChild(ChildComponent)
    child: ChildComponent;

    clearChild() {
        this.child.clear();
    }
}

注意！子视图仅在ngAfterViewInit后才可用。

在Angular初始化组件的视图和子视图后进行响应。在第一次ngAfterContentChecked（）之后调用一次。仅限组件的挂钩。

如果要自动执行方法，则需要在此生命周期钩子中执行此操作。

您还可以通过QueryList装饰工具获取ViewChildren子组件。

import { Component, ViewChildren, QueryList } from '@angular/core';
import { ChildComponent } from './components/child/child.component';

...

@ViewChildren(ChildComponent)
children: QueryList<ChildComponent>;

QueryList可能非常有用，例如你可以订阅儿童的变化。

也可以创建template reference variables并通过ViewChild装饰器访问它们。

调用子组件

4 个答案: