我正在尝试使用我的特色元素在主页上模拟轮播。它正在获取特色元素，但是html中的最后一个ActivityIndicator不会停止，并且我无法滑动到其他元素。
我是Nativescript和Typescript的新手
这是我的home.component.ts
import { Component, OnInit, Inject, ChangeDetectorRef } from '@angular/core';
//import { TNSFontIconService } from 'nativescript-ngx-fonticon';
import { Page } from "ui/page";
import { View } from "ui/core/view";
import { SwipeGestureEventData, SwipeDirection } from "ui/gestures";
import * as enums from "ui/enums";
import { Cabin } from '../shared/cabin';
import { CabinService } from '../services/cabin.service';
import { House } from '../shared/house';
import { HouseService } from '../services/house.service';
import { Ecoactivity } from '../shared/ecoactivity';
import { EcoactivityService } from '../services/ecoactivity.service';
import { DrawerPage } from '../shared/drawer/drawer.page';
@Component({
selector: 'app-home',
moduleId: module.id,
templateUrl: './home.component.html',
// styleUrls: ['./home.component.css']
})
export class HomeComponent extends DrawerPage implements OnInit {
cabin: Cabin;
house: House;
ecoactivity: Ecoactivity;
cabinErrMess: string;
houseErrMess: string;
ecoactivityErrMess: string;
showLeftCard: boolean = true;
showMiddleCard: boolean = false;
showRightCard: boolean = false;
leftCard: View;
middleCard: View;
rightCard: View;
constructor(private cabinservice: CabinService,
private houseservice: HouseService,
private ecoactivityservice: EcoactivityService,
private changeDetectorRef: ChangeDetectorRef,
private page: Page,
@Inject('BaseURL') private BaseURL) {
super(changeDetectorRef);
}
ngOnInit() {
this.cabinservice.getFeaturedCabin()
.subscribe(cabin => this.cabin = cabin,
errmess => this.cabinErrMess = <any>errmess);
this.houseservice.getFeaturedHouse()
.subscribe(house => this.house = house,
errmess => this.houseErrMess= <any>errmess);
this.ecoactivityservice.getFeaturedEcoactivity()
.subscribe(ecoactivity => this.ecoactivity = ecoactivity,
errmess => this.ecoactivityErrMess = <any>errmess);
}
onSwipe(args: SwipeGestureEventData) {
console.log("Swipe Direction: " + args.direction);
if (args.direction === SwipeDirection.left) {
this.animateLeft();
}
else if (args.direction === SwipeDirection.right) {
this.animateRight();
}
}
animateLeft() {
if (this.cabin && this.house && this.ecoactivity) {
this.leftCard = this.page.getViewById<View>('leftCard');
this.middleCard = this.page.getViewById<View>('middleCard');
this.rightCard = this.page.getViewById<View>('rightCard');
if (this.showLeftCard) {
this.rightCard.animate({
translate: { x: 2000, y: 0 }
})
.then(() => {
this.leftCard.animate({
translate: { x: -2000, y: 0 },
duration: 500,
curve: enums.AnimationCurve.easeInOut
})
.then(() => {
this.showLeftCard = false;
this.showMiddleCard = true;
this.middleCard.animate({
translate: { x: 0, y: 0 },
duration: 500,
curve: enums.AnimationCurve.easeInOut
});
});
});
}
else if (this.showMiddleCard) {
this.leftCard.animate({
translate: { x: 2000, y: 0 },
duration: 500
})
.then(() => {
this.middleCard.animate({
translate: { x: -2000, y: 0 },
duration: 500,
curve: enums.AnimationCurve.easeInOut
})
.then(() => {
this.showMiddleCard = false;
this.showRightCard = true;
this.rightCard.animate({
translate: { x: 0, y: 0 },
duration: 500,
curve: enums.AnimationCurve.easeInOut
});
});
});
}
else if (this.showRightCard) {
this.middleCard.animate({
translate: { x: 2000, y: 0 },
duration: 500
})
.then(() => {
this.rightCard.animate({
translate: { x: -2000, y: 0 },
duration: 500,
curve: enums.AnimationCurve.easeInOut
})
.then(() => {
this.showRightCard = false;
this.showLeftCard = true;
this.leftCard.animate({
translate: { x: 0, y: 0 },
duration: 500
});
});
});
}
}
}
animateRight() {
if (this.cabin && this.house && this.ecoactivity) {
this.leftCard = this.page.getViewById<View>('leftCard');
this.middleCard = this.page.getViewById<View>('middleCard');
this.rightCard = this.page.getViewById<View>('rightCard');
if (this.showLeftCard) {
this.middleCard.animate({
translate: { x: -2000, y: 0 },
duration: 500
})
.then(() => {
this.leftCard.animate({
translate: { x: 2000, y: 0 },
duration: 500,
curve: enums.AnimationCurve.easeInOut
})
.then(() => {
this.showLeftCard = false;
this.showRightCard = true;
this.rightCard.animate({
translate: { x: 0, y: 0 },
duration: 500,
curve: enums.AnimationCurve.easeInOut
});
});
});
}
else if (this.showMiddleCard) {
this.rightCard.animate({
translate: { x: -2000, y: 0 },
duration: 500
})
.then(() => {
this.middleCard.animate({
translate: { x: 2000, y: 0 },
duration: 500,
curve: enums.AnimationCurve.easeInOut
})
.then(() => {
this.showMiddleCard = false;
this.showLeftCard = true;
this.leftCard.animate({
translate: { x: 0, y: 0 },
duration: 500,
curve: enums.AnimationCurve.easeInOut
});
});
});
}
else if (this.showRightCard) {
this.leftCard.animate({
translate: { x: -2000, y: 0 },
duration: 500
})
.then(() => {
this.rightCard.animate({
translate: { x: 2000, y: 0 },
duration: 500,
curve: enums.AnimationCurve.easeInOut
})
.then(() => {
this.showRightCard = false;
this.showMiddleCard = true;
this.middleCard.animate({
translate: { x: 0, y: 0 },
duration: 500
});
});
});
}
}
}
}
这是我的home.component.html
<StackLayout tkMainContent (swipe)="onSwipe($event)">
<GridLayout horizontalAlignment="center" verticalAlignment="top" rows="*" columns="*" height="95%">
<GridLayout id="leftCard" row="0" margin="5" rows="* auto" columns="*" *ngIf="cabin" [visibility]="showLeftCard ? 'visible' : 'collapsed'"
class="border">
<Image row="0" stretch="aspectFill" [src]="BaseURL + cabin.image"></Image>
<StackLayout padding="10" row="1">
<Label class="h2" [text]="cabin.name"></Label>
<Label class="body" [text]="cabin.description" textWrap="true"></Label>
</StackLayout>
</GridLayout>
<ActivityIndicator busy="true" *ngIf="!(cabin || cabinErrMess)" width="50" height="50" class="activity-indicator"></ActivityIndicator>
<Label *ngIf="cabinErrMess" [text]="'Error: ' + cabinErrMess"></Label>
<GridLayout id="middleCard" row="0" margin="5" rows="* auto" columns="*" *ngIf="house" [visibility]="showMiddleCard ? 'visible' : 'collapsed'"
class="border">
<Image row="0" stretch="aspectFill" [src]="BaseURL + house.image"></Image>
<StackLayout padding="10" row="1">
<Label class="h2" [text]="house.name"></Label>
<Label class="body" [text]="house.description" textWrap="true"></Label>
</StackLayout>
</GridLayout>
<ActivityIndicator busy="true" *ngIf="!(house || houseErrMess)" width="50" height="50" class="activity-indicator"></ActivityIndicator>
<Label *ngIf="houseErrMess" [text]="'Error: ' + houseErrMess"></Label>
<GridLayout id="rightCard" row="0" margin="5" rows="* auto" columns="*" *ngIf="ecoactivity" [visibility]="showRightCard ? 'visible' : 'collapsed'"
class="border">
<Image row="0" stretch="aspectFill" [src]="BaseURL + ecoactivity.image"></Image>
<StackLayout padding="10" row="1">
<Label class="h2" [text]="ecoactivity.name"></Label>
<Label class="h3" [text]="ecoactivity.designation"></Label>
<Label class="body" [text]="ecoactivity.description" textWrap="true"></Label>
</StackLayout>
</GridLayout>
<ActivityIndicator busy="true" *ngIf="!(ecoactivity || ecoactivityErrMess)" width="50" height="50" class="activity-indicator"></ActivityIndicator>
<Label *ngIf="ecoactivityErrMess" [text]="'Error: ' + ecoactivityErrMess"></Label>
</GridLayout>
</StackLayout>