Question

我想从

中的另一个组件的模板调用组件的功能

离子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>

这是在home.ts的帮助下显示的。

doLogin(event) {    
    var user1 =this.loginForm.value;
    var password = this.loginForm.controls.password.value;
    this.homeService.doLogin(user1).subscribe(
        user =>{
            this.user = user.results; 
            this.storage.set('isLoggedIn', 'shahjad');
            this.navCtrl.setRoot(DashboardComponent, {thing1: user });
        },
        err => {
            console.log(err);
        },
        () => console.log('login complete')

        );
}

现在，我想从仪表板组件中调用学生组件功能

我创建了像 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");
    }
}

Answer 1

如果您的学生成员是仪表板的直接子项，您可以使用viewchild。

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

在你的组件中：

@ViewChild('student') student: StudentComponent

Answer 2

你一定要看看Angular的服务和how to build a custom one。您可以看到thread about this here。

基本上，您将创建一个Injectable，将其添加到您的NgModule（或碎片模块），然后注入您需要使用它的组件。其他伟大的tutorial就在这里。

Answer 3

您需要创建一个提供程序并将所有提取数据的函数放在那里。这样，您可以轻松导入提供程序并随时随地获取数据。

有关详情，请参阅this post

Answer 4

首先，在许多组件中创建函数和使用的最佳方法是使用service。
其次，如果你还想在其他组件中调用一个函数，你可以这样做：

第1步：在StudentComponent中注明DashboardComponent：

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：您可以在模板中调用新的fetchAllClass函数：

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

如何从离子2中的另一个组件的模板调用组件的功能

4 个答案: