Angular 2 - 如何从父级触发子级的方法

typescript

Angular 2 - 如何从父级触发子级的方法

在Angular 2中，当我们需要从父级组件触发子级组件的方法时，可以使用@ViewChild装饰器和子级组件的实例来实现。这种方法使得父级组件可以直接调用子级组件的方法，从而实现组件之间的通信。

在本文中，我们将介绍如何使用@ViewChild来从父级组件触发子级组件的方法，并提供一个简单的案例代码来演示。

步骤 1 - 创建子级组件

首先，我们需要创建一个子级组件，该组件将包含我们要从父级触发的方法。下面是一个简单的子级组件示例代码：

typescript
import { Component } from '@angular/core';
@Component({
  selector: 'app-child',
  template: <code>
    <h2>子级组件</h2>
  </code>
})
export class ChildComponent {
  public childMethod(): void {
    console.log('子级方法被触发！');
  }
}

在上面的代码中，我们创建了一个名为ChildComponent的子级组件，并定义了一个名为childMethod的公共方法。在该方法中，我们只是简单地在控制台中输出一条消息。

步骤 2 - 创建父级组件

接下来，我们需要创建一个父级组件，该组件将包含子级组件，并触发子级组件的方法。下面是一个简单的父级组件示例代码：

typescript
import { Component, ViewChild } from '@angular/core';
import { ChildComponent } from './child.component';
@Component({
  selector: 'app-parent',
  template: <code>
    <h2>父级组件</h2>
    <button (click)="triggerChildMethod()">触发子级方法</button>
    <app-child></app-child>
  </code>
})
export class ParentComponent {
  @ViewChild(ChildComponent)
  private childComponent: ChildComponent;
  public triggerChildMethod(): void {
    this.childComponent.childMethod();
  }
}

在上面的代码中，我们创建了一个名为ParentComponent的父级组件。通过使用@ViewChild装饰器和子级组件的类型ChildComponent，我们可以在父级组件中获取子级组件的实例。

我们还定义了一个名为triggerChildMethod的公共方法，该方法在点击按钮时将触发子级组件的childMethod方法。

步骤 3 - 在模块中引入组件

最后，我们需要在Angular模块中引入父级组件和子级组件。下面是一个简单的模块示例代码：

typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ChildComponent } from './child.component';
import { ParentComponent } from './parent.component';
@NgModule({
  imports: [BrowserModule],
  declarations: [ChildComponent, ParentComponent],
  bootstrap: [ParentComponent]
})
export class AppModule { }

在上面的代码中，我们将ChildComponent和ParentComponent添加到declarations数组中，以便它们可以在模块中使用。

案例代码运行结果

当我们点击"触发子级方法"按钮时，子级组件的childMethod方法将被触发，并在控制台中输出一条消息。

这就是使用@ViewChild装饰器和子级组件的实例来实现从父级触发子级方法的简单方法。通过这种方式，我们可以在Angular 2中实现组件之间的通信，并且可以方便地调用子级组件的方法。