Nativescript Angular Tabview 绑定

Question

我正在使用带有 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>

感谢您帮助解决此问题。

Answer 1

问题是，它似乎已经在“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;
       }
       }
    }