Angular 如何从ionic 2中另一个组件的模板调用组件的函数

我想从中另一个组件的模板调用组件的函数

爱奥尼亚2.我使用home.ts在我的应用程序dashboard.html中获得一个仪表板

组成部分

<ion-content> 
<div class="dashboardSection">

            <a href="" (click)="fetchAllClass()">
                <div class="header padding text-center classes common">
                    <img src="assets/images/icos_15.png" alt="Your logo here"  width="50%" height="auto"/>
                    <p class="Sectiontitle">STUDENTS</p>
                </div>
            </a></div>
</ion-content>

现在，我想从仪表板组件调用student组件的函数

我创建了学生组件，如students.ts

@Component({

    selector: 'page-students',
    templateUrl: "./students.html"
})
export class StudentsComponent {
    dashboardItem: any;
    mode = "Observable";
    errorMessage: string;

    constructor(public fb: FormBuilder,private studentsService: StudentsService,public navCtrl: NavController,private storage: Storage,private menu: MenuController) {}

    fetchAllClass(event) {  

        alert("fd");
    }
}

---

你绝对应该看看Angular的服务和服务。 你可以看到一个

基本上，您将创建一个可注入模块，将其添加到NgModule（或分解模块）中，然后注入需要使用它的组件。

---

这里还有另一个很棒的地方。

您需要创建一个提供程序，并将所有获取数据的函数放在其中。通过这种方式，您可以轻松地导入提供程序并在任何需要的地方获取数据

---

有关更多信息，请参阅

如果您的studentcomponent是dashboard的直接子级，则可以使用viewchild

<page-student #student></page-student>

• 首先，创建函数并在许多组件中使用的最佳方法是使用

• 其次，如果您仍然想调用其他组件中的函数，可以这样做：
  

步骤1：将

学生组件

插入

仪表板组件

：

import { Component,Inject,forwardRef } from '@angular/core';
import {StudentComponent} from '../component/students'
@Component({
   selector: 'dashboard',
   templateUrl: 'dashboard.html',
   providers:[StudentComponent]
})
constructor(@Inject(forwardRef(() => StudentComponent))private studentComponent: StudentComponent){
}

步骤2：现在可以调用StudentComponent的函数：

fetchAllClass(event) {  
this.studentComponent.fetchAllClass(event);
}

步骤3：您可以在模板中调用new

fetchAllClass

函数：

<a href="" (click)="fetchAllClass()">

fetchAllClass(event) {  
this.studentComponent.fetchAllClass(event);
}

<a href="" (click)="fetchAllClass()">