如何在Angular中从其他组件调用函数。

11 浏览
0 Comments

如何在Angular中从其他组件调用函数。

如何在我的report-list.ts上调用getReports函数？

我想要的是在report-list.ts上调用getReports函数。

例如，在我的report-list.ts上我有一个函数saveData() { ... }，在saveData函数中，我想要调用report.ts中的getReports函数。

0

3 答案

0 Comments

在Angular中，从一个组件中调用另一个组件的函数可以使用服务或一些辅助函数来实现，但是如果真的想要在父组件中访问子组件的方法，可以按照以下步骤进行操作：

首先，在子组件中定义一个公共方法。例如，在ReportComponent组件中定义一个名为getReport的方法，用来输出日志信息。

然后，在父组件中引入子组件，并使用ViewChild装饰器来获取对子组件的引用。例如，在ReportListComponent组件中引入ReportComponent，并使用ViewChild装饰器来获取对其的引用。

最后，在父组件的模板中调用子组件的方法。例如，在ReportListComponent组件的模板中，通过点击事件调用callGetReport方法，然后在该方法中调用子组件的getReport方法。

通过以上步骤，就可以实现在父组件中调用子组件的函数。

下面是具体的代码实现：

在ReportComponent组件中定义getReport方法，用来输出日志信息：

import { Component } from "/core";
@Component({
  selector: "report",
  template: '
hi this is template
',
  styles:[]
})
export class ReportComponent {
  getReport() {
    console.log('hi get report');
  }
}

在ReportListComponent组件中引入ReportComponent，并使用ViewChild装饰器来获取对其的引用：

import { Component, ViewChild } from "/core";
import { ReportComponent } from "./report.component";
@Component({
  selector: "report-list",
  template: `

      
This is report List

        
  
`,
  styles: []
})
export class ReportListComponent {
  @ViewChild(ReportComponent) public report: ReportComponent;
  callGetReport() {
    this.report.getReport();
  }
}

通过以上的代码实现，就可以在父组件ReportListComponent中调用子组件ReportComponent的getReport方法了。

0
0 Comments

在Angular中，如果需要从一个组件调用另一个组件的函数，可以采取以下几种方法：

1. 共享应用程序模型：组件可以通过共享的应用程序模型进行通信。当一个组件对模型进行更改时，与该模型绑定的其他组件会自动更新。

2. 组件事件：子组件可以通过()绑定向父组件发出事件。父组件可以处理事件，并操作应用程序模型或其自身的视图模型。对应用程序模型的更改会自动传播到直接或间接绑定到同一模型的所有组件。

3. 服务事件：组件可以订阅服务事件。例如，两个兄弟组件可以订阅同一个服务事件，并通过修改各自的模型来作出响应。

以下是一个使用共享服务的示例代码：

@Injectable()
export class CustomService {
    getReport() {
        // your code
    }
}
@Component({
    selector: 'list-report',
    template: 'Disagree'
})
export class ListReportComponent {
    constructor(private customService: CustomService) {}
    ngOnInit() {
        // this will emit the event and call the getReport
        this.customService.getReport();
    }
}

另一种方法是使用事件发射器，但这取决于组件之间的关系（父/子）。但是，使组件之间通信的最佳/通用方法是使用共享服务。

import { Component, EventEmitter, Input, Output } from '@angular/core';
@Component({
    selector: 'list-component',
    template: `
        Disagree
    `
})
export class ListComponent {
    getReport() {
        // your code
    }
}
@Component({
    selector: 'list-report',
    template: ''
})
export class ListReportComponent {
    @Output() getReport = new EventEmitter();
    ngOnInit() {
        // this will emit the event and call the getReport
        this.getReport.emit();
    }
}

希望这对你有帮助。

0
0 Comments

在Angular中，从其他组件调用函数的做法并不好。相反，应该创建一个服务，并将该函数getReports添加到该服务中，并在所有需要调用此函数的组件中使用该服务。

// 创建一个服务文件 my-service.service.ts
import { Injectable } from '@angular/core';
@Injectable({
  providedIn: 'root'
})
export class MyServiceService {
  getReports() {
    // 在此处编写函数的逻辑
  }
}

然后，在需要调用getReports函数的组件中，注入该服务，并使用该服务调用函数。

// 在组件中注入服务
import { Component } from '@angular/core';
import { MyServiceService } from 'path-to-my-service.service';
@Component({
  selector: 'app-my-component',
  template: `
    
  `
})
export class MyComponent {
  constructor(private myService: MyServiceService) {}
  callFunction() {
    this.myService.getReports();
  }
}

通过这种方式，可以在任何需要调用getReports函数的组件中注入并使用该服务，而不需要直接从一个组件调用另一个组件的函数。这种做法使代码更加模块化和可维护，并遵循Angular的设计原则。

0