Angular 4 从另一个组件执行函数 - Javascript

在Angular 4中，组件是一个具有不同功能的独立模块。有时候，你需要从另一个组件执行一个函数。那么，你该如何实现？本文将会为你介绍几种实现方式。

对于具有父子关系的组件：

如果你需要执行子组件函数，可以通过@ViewChild()装饰器获取子组件实例，如下所示：

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { ChildComponent } from './child.component';

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

export class ParentComponent implements AfterViewInit{
    @ViewChild(ChildComponent) childComponent: ChildComponent;
    
    ngAfterViewInit() {
        this.childComponent.childFunction();
    }
}

其中，ChildComponent是需要执行函数的子组件，在ParentComponent中通过@ViewChild()装饰器获取ChildComponent实例，并在ngAfterViewInit()生命周期函数中执行childFunction()函数。

对于需要从子组件执行父组件函数的情况，可以通过@Output()装饰器将需要执行的函数声明在父组件中，并在子组件中使用EventEmitter将该函数传递给父组件，如下所示：

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
    selector: 'child-component',
    template: `
        <button (click)="childFunction()">Click me</button>
    `
})

export class ChildComponent {
    @Output() parentFunction = new EventEmitter();

    childFunction() {
        this.parentFunction.emit();
    }
}

其中，ChildComponent声明了一个parentFunction函数，在childFunction()中触发parentFunction.emit()将该函数传递给父组件。

对于无父子关系的组件：

对于无父子关系的组件，你可以通过Angular 4的服务（Service）来实现。服务是一个简单的用来封装各种数据和功能的类，它可以让你在整个应用程序中使用相同的数据和功能。

在服务中，你可以定义需要执行的函数，然后在各个组件中引入该服务，通过该服务来执行该函数。如下所示：

import { Injectable } from '@angular/core';

@Injectable()
export class MyService {
    myFunction() {
        console.log('Hello World!');
    }
}

在组件中引入该服务：

import { Component } from '@angular/core';
import { MyService } from './my-service';

@Component({
    selector: 'my-component',
    template: `
        <button (click)="myService.myFunction()">Click me</button>
    `
})

export class MyComponent {
    constructor(private myService: MyService) { }
}

在MyComponent组件中通过MyService执行myFunction()函数。

以上就是Angular 4从另一个组件执行函数的几种方法。无论哪种方法，都可以帮助你实现不同组件之间的交互。