我想从另一个组件的模板中调用组件的功能
离子2.我使用home.ts在我的app 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");
}
}
如果您的studentcomponent是仪表板的直接子项,则可以使用viewchild。
<page-student #student></page-student>
在你的组件中:
@ViewChild('student') student: StudentComponent
你绝对应该看看Angular的服务和how to build a custom one。你可以看到一个thread about this here。
基本上,您将创建一个Injectable,将其添加到您的NgModule(或一个Shred模块),然后注入您需要使用它的组件。其他伟大的tutorial就在这里。
您需要创建一个提供程序并将所有提取数据的函数放在那里。这样,您可以轻松导入提供程序并在任何位置获取数据。
有关更多信息,请参阅this post
第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);
}
Step3:你可以在模板中调用新的fetchAllClass
函数:
<a href="" (click)="fetchAllClass()">