0

我正在使用带有 angular2 和 tabview 的 nativescript。到目前为止，tabview 运行良好，我还可以在 tabItems 之间单击或滑动时获取和设置 tabIndex。

我现在的问题是，如果触发了“onSelectedIndexChanged”事件，我无法使用数据绑定设置标题标题。它抛出错误“ExpressionChangedAfterItHasBeenCheckedError”。

以下是组件内容：

import { Component, OnInit, EventEmitter, Output } from "@angular/core";
import { ConfigService } from "../../services/config.service";
import { CustomerService } from "../../services/customer.service";
import { UserService } from "../../services/user.service";

@Component({
     selector: "app-header",
     templateUrl: "./components/shared/header.component.html",
     styleUrls: ["./components/shared/header.component.css"]
})

export class HeaderComponent implements OnInit {
    @Output() openMenuEmmiter = new EventEmitter<boolean>();
    customer_image: string;
    isAuthenticated: boolean = false;
    tabSelectedIndex: number;
    menuPointTitle: string;

    constructor (private _configService: ConfigService, private _customerService: CustomerService, private _userService: UserService) {

    }

    ngOnInit() {
         this.tabSelectedIndex = 0;
         this.menuPointTitle = "Home";

         this._userService.getIsAuthenticated().subscribe(
             (state) => {this.isAuthenticated = state;}
         );

         this._customerService.getCurrentCustomer().subscribe(
             (customer) => {this.customer_image = customer.image;}
         );

     }

     onOpenMenu () {
         this.openMenuEmmiter.emit(true);
     }

     onSelectedIndexChanged() {
         this.menuPointTitle = this.tabSelectedIndex+"test";
         console.log(this.tabSelectedIndex);
     }
 }

HTML 代码如下：

<StackLayout class="accent">
    <FlexboxLayout flexDirection="column">
        <FlexboxLayout>

            <Label flexGrow="1" [text]="menuPointTitle" style="font-size: 18; font-weight: bold;"></Label>
            <Label [nsRouterLink]="['/start']" width="30"  class="mdi" [text]="'mdi-notifications' | fonticon" style="font-size: 24"></Label>
            <Label  [nsRouterLink]="['/login']" width="30"  class="mdi" [text]="'mdi-more-vert' | fonticon" style="font-size: 24"></Label>
        </FlexboxLayout>
    </FlexboxLayout>
</StackLayout>


<TabView [(ngModel)]="tabSelectedIndex"  [selectedIndexChanged]="onSelectedIndexChanged()" tabsBackgroundColor="#97201A" selectedTabTextColor="#FFFFFF" tabTextColor="#DB645E" selectedColor="#FFFFFF" class="fa" style="margin: 0; font-size: 20;">
    <StackLayout *tabItem="{title: '&#xf015;'}" style="font-size: 20">
        <Label [nsRouterLink]="['/start']" width="30"  class="mdi" [text]="'mdi-home' | fonticon"></Label>
    </StackLayout>
    <StackLayout *tabItem="{title: '&#xf1ea;'}">
        <Label [nsRouterLink]="['/start']" width="30"  class="mdi" [text]="'mdi-message' | fonticon"></Label>
    </StackLayout>
    <StackLayout *tabItem="{title: '&#xf07b;'}">
        <Label [nsRouterLink]="['/start']" width="30"  class="mdi" [text]="'mdi-folder' | fonticon"></Label>
    </StackLayout>
    <StackLayout *tabItem="{title: '&#xf005;'}">
        <Label [nsRouterLink]="['/start']" width="30"  class="mdi" [text]="'mdi-star' | fonticon"></Label>
    </StackLayout>
    <StackLayout *tabItem="{title: '&#xf059;'}">
        <Label [nsRouterLink]="['/start']" width="30"  class="mdi" [text]="'mdi-star' | fonticon"></Label>
    </StackLayout>
</TabView>

感谢您帮助解决此问题。

4

1 回答 1

0

问题是，它似乎已经在“ngOnInit”之前调用了“onSelectedIndexChanged”，而且还调用了很多次。所以我把绑定弄错了，但有一个简单的出路。

  1. 将方法调用更改为 (selectedIndexChanged)="onSelectedIndexChanged($event)" 以获取事件的参数。

    <StackLayout class="accent">
    <FlexboxLayout flexDirection="column">
    <FlexboxLayout>
        <Label flexGrow="1" [text]="menuPointTitle" style="font-size: 18; font-weight: bold;"></Label>
        <Label [nsRouterLink]="['/start']" width="30"  class="mdi" [text]="'mdi-notifications' | fonticon" style="font-size: 24"></Label>
        <Label  [nsRouterLink]="['/login']" width="30"  class="mdi" [text]="'mdi-more-vert' | fonticon" style="font-size: 24"></Label>
    </FlexboxLayout>
    </FlexboxLayout>
</StackLayout>


<TabView [(ngModel)]="tabSelectedIndex"  (selectedIndexChanged)="onSelectedIndexChanged($event)" tabsBackgroundColor="#97201A" selectedTabTextColor="#FFFFFF" tabTextColor="#DB645E" selectedColor="#FFFFFF" class="fa" style="margin: 0; font-size: 20;">
    <StackLayout *tabItem="{title: '&#xf015;'}" style="font-size: 20">
    <Label [nsRouterLink]="['/start']" width="30"  class="mdi" [text]="'mdi-home' | fonticon"></Label>
    </StackLayout>
    <StackLayout *tabItem="{title: '&#xf1ea;'}">
    <Label [nsRouterLink]="['/start']" width="30"  class="mdi" [text]="'mdi-message' | fonticon"></Label>
    </StackLayout>
    <StackLayout *tabItem="{title: '&#xf07b;'}">
    <Label [nsRouterLink]="['/start']" width="30"  class="mdi" [text]="'mdi-folder' | fonticon"></Label>
    </StackLayout>
    <StackLayout *tabItem="{title: '&#xf005;'}">
    <Label [nsRouterLink]="['/start']" width="30"  class="mdi" [text]="'mdi-star' | fonticon"></Label>
    </StackLayout>
    <StackLayout *tabItem="{title: '&#xf059;'}">
    <Label [nsRouterLink]="['/start']" width="30"  class="mdi" [text]="'mdi-star' | fonticon"></Label>
    </StackLayout>
</TabView>

  2. 如果值已更改，则将组件内的方法更改为仅运行。

    import { Component, OnInit, EventEmitter, Output } from "@angular/core";
import { ConfigService } from "../../services/config.service";
import { CustomerService } from "../../services/customer.service";
import { UserService } from "../../services/user.service";

@Component({
     selector: "app-header",
     templateUrl: "./components/shared/header.component.html",
     styleUrls: ["./components/shared/header.component.css"]
})

export class HeaderComponent implements OnInit {
    @Output() openMenuEmmiter = new EventEmitter<boolean>();
    customer_image: string;
    isAuthenticated: boolean = false;
    tabSelectedIndex: number;
    menuPointTitle: string;

    constructor (private _configService: ConfigService, private _customerService: CustomerService, private _userService: UserService) {

    }

    ngOnInit() {
     this.tabSelectedIndex = 0;
     this.menuPointTitle = "Home";

     this._userService.getIsAuthenticated().subscribe(
         (state) => {this.isAuthenticated = state;}
     );

     this._customerService.getCurrentCustomer().subscribe(
         (customer) => {this.customer_image = customer.image;}
     );

     }

     onOpenMenu () {
     this.openMenuEmmiter.emit(true);
     }

    onSelectedIndexChanged(args) {
    if (args.newIndex != args.oldIndex) {
        console.log(args.newIndex);
        this.menuPointTitle = "test"+args.newIndex;
    }
    }
 }
于 2017-04-26T14:07:15.887 回答