Nativescript Angular Tabview绑定

问题描述：

我正在使用native2和angular2和tabview。到目前为止，tabview运行良好，我还可以在tabItems之间单击或滑动时获取和设置tabIndex。Nativescript Angular Tabview绑定

我现在的问题是，如果事件“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>

感谢您的帮助来解决这个问题。

答

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

更改方法调用（的SelectedIndexChanged）= “onSelectedIndexChanged（$事件）”，以获取事件的参数。

<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>

将组件内部的方法更改为只有在该值已更改时才运行。

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; 
    } 
    } 
}

Nativescript Angular Tabview绑定

相关推荐