Question

我使用带有Angular的 Nativescript 创建了一个使用TabView的应用。

操作栏有一个刷新按钮，我希望能够刷新任何可见路径上的数据。

我已尝试使用Angular2 - Interaction between components using a service

的答案

但是我点击

时收到此错误

this.sharedService.componentDashFn不是函数。（在＆＃39; this.sharedService.componentDashFn（）＆＃39 ;, ＆＃39; this.sharedService.componentDashFn＆＃39;未定义）

共享service.ts

import { Injectable } from "@angular/core";
@Injectable()
export class SharedService {

    componentDashFn: Function;
    componentPropFn: Function;
    componentHouseFn: Function;
    componentMoreFn: Function;

    constructor() { }
}

home.html的

<ActionBar title="Genkan">
<ActionItem>
 <Image src="res://logo_fw"></Image>
</ActionItem>
   <ActionItem [visibility]="showRefresh ? 'visible' : 'collapse'" text="Refresh" (tap)="refresh()" android.systemIcon="ic_menu_refresh" ios.systemIcon="13" ios.position="right"></ActionItem>
</ActionBar>

<TabView #element [(ngModel)]="tabSelectedIndex" (selectedIndexChange)="onIndexChanged($event)" selectedColor="#d8292f">
    <ng-template tabItem title="Dashboard" iconSource="{{dashActive === true ? 'res://dashboard' : 'res://dashboard'}}">
        <StackLayout>
    <router-outlet name="dashoutlet"></router-outlet>
        </StackLayout>
    </ng-template>
    <ng-template tabItem title="Properties" iconSource="{{propActive === true ? 'res://properties' : 'res://properties'}}">
        <StackLayout>
    <router-outlet name="propoutlet"></router-outlet>
        </StackLayout>
    </ng-template>
    <ng-template tabItem title="Housekeeping" iconSource="{{trustActive === true ? 'res://trust' : 'res://trust'}}">
        <StackLayout>
    <router-outlet name="trustoutlet"></router-outlet>
        </StackLayout>
    </ng-template>
    <ng-template tabItem title="More" iconSource="{{moreActive === true ? 'res://more' : 'res://more'}}">
        <StackLayout>
    <router-outlet name="moreoutlet"></router-outlet>
        </StackLayout>
    </ng-template>
</TabView>

home.component.ts

import { SharedService } from "../../shared/share-service";
@NgModule({
  imports: [
    NativeScriptModule,
    NativeScriptFormsModule
  ],
  declarations: [HomeComponent],
  bootstrap: [HomeComponent]
})
@Component({
  selector: "home",
  templateUrl: "pages/home/home.html",
  styleUrls: ["pages/home/home-common.css", "pages/home/home.css"],
  providers: [GenkanService, BookingListService, SharedService]
})
export class HomeComponent implements OnInit, PipeTransform {
constructor(private sharedService: SharedService, private bookingListService: BookingListService, private http: Http, private nav: RouterExtensions, private zone: NgZone, private router: Router, private data: Data) {    }

......
  refresh(){
    switch(this.tabSelectedIndex){
        case 0: //dashboard
             this.sharedService.componentDashFn(); 
        break;
        case 1: //properties
             // this.sharedService.componentPropFn(); 
        break;
        case 2: //housekeeping
             // this.sharedService.componentHouseFn(); 
        break;
        case 3: //more
             // this.sharedService.componentMoreFn(); 
        break;
    }
  }
}

dashboard.component.ts

import { SharedService } from "../../shared/share-service";
@NgModule({
  imports: [
    NativeScriptModule,
    NativeScriptFormsModule
  ],
  declarations: [DashboardComponent],
  bootstrap: [DashboardComponent]
})
@Component({
  selector: "dashboard",
  templateUrl: "pages/dashboard/dashboard.html",
  styleUrls: ["pages/dashboard/dashboard-common.css", "pages/dashboard/dashboard.css"],
  providers: [GenkanService, BookingListService, MyUtils, SharedService]
})
export class DashboardComponent implements OnInit, PipeTransform {
    constructor(private sharedService: SharedService, private bookingListService: BookingListService, private http: Http, private nav: RouterExtensions, private genkanService: GenkanService, private myutil: MyUtils, private zone: NgZone, private router: Router, private data: Data) {
        this.sharedService.componentDashFn = this.refresh;
        console.log(this.sharedService.componentDashFn);
    }
    refresh(){
        console.log('dashboard refresh');
        this.data.storage.dashData = false;
        this.todays_arrivals = 0;
        this.todays_departures = 0;
        this.current_bookings = 0;
        this.total_forward_bookings = 0;
        this.loadData();
    }



loadData(){
        console.log('loadData');
        this.isLoading = true;
        this.currentdate = new Date();
        let client = JSON.parse(ApplicationSettings.getString("client_loggin"));
        console.dir(this.myutil);
        this.welcome = 'Welcome ' + client.user + ' | ' + this.currentdate.getDate() + ' ' + this.myutil.monthText[this.currentdate.getMonth()] + ' ' + this.currentdate.getFullYear();
        let cmonth = this.currentdate.getMonth()+1;
        let cdate = this.currentdate.getDate();
        let month_s = cmonth + '';
        let date_s = cdate + '';
        if(cmonth < 10) { month_s = '0' + cmonth;}
        if(cdate < 10) { date_s = '0' + cdate;}
        let formated_today = this.currentdate.getFullYear() + '-' + month_s + '-' + date_s;
        let formated_lastyear = (this.currentdate.getFullYear()-1) + '-' + month_s + '-' + date_s;
        let month_today = this.currentdate.getFullYear() + '-' + month_s;
        let month_lastyear = (this.currentdate.getFullYear()-1) + '-' + month_s;
        let year_today = this.currentdate.getFullYear() + '';
        let year_lastyear = (this.currentdate.getFullYear()-1) + '';
        this.getBookingData(client, year_today, 'get_bookings_summary', 'this_year', false);
        this.getBookingData(client, year_lastyear, 'get_bookings_summary', 'last_year', false);
        this.getBookingData(client, month_today, 'get_bookings_summary', 'this_year', false);
        this.getBookingData(client, month_lastyear, 'get_bookings_summary', 'last_year', false);
    switch(this.current_display){
        case 'month':
            formated_today = this.currentdate.getFullYear() + '-' + month_s;
            formated_lastyear = (this.currentdate.getFullYear()-1) + '-' + month_s;
            break;
        case 'year':
            formated_today = this.currentdate.getFullYear() + '';
            formated_lastyear = (this.currentdate.getFullYear()-1) + '';
            break;
        case 'today':
        default:
            formated_today = this.currentdate.getFullYear() + '-' + month_s + '-' + date_s;
            formated_lastyear = (this.currentdate.getFullYear()-1) + '-' + month_s + '-' + date_s;
            break;
    }

        this.getBookingData(client, formated_today, 'get_bookings_summary', 'this_year');
        this.getBookingData(client, formated_lastyear, 'get_bookings_summary', 'last_year');
        this.getBookingData(client, formated_today, 'get_current_bookings', 'current_bookings');
        this.getBookingData(client, formated_today, 'get_forward_bookings', 'forward_bookings');

    }

}

Nativescript TabView在操作栏中创建刷新按钮

0 个答案: