运行选择选项卡时的功能 - Angular2+NativeScript

Question

我熟悉 Angular，但我才刚刚开始学习 NativeScript。我有一个使用 NativeScript 库中的 Tab 模板的 Tab 界面。当我的选项卡被选中时，我想运行一个函数，但我无法弄清楚它。

这里是 app.component.html:

<TabView [(ngModel)]="tabSelectedIndex" androidTabsPosition="bottom" (selectedIndexChanged)="onSelectedIndexChanged($event)">
    <page-router-outlet *tabItem="{title: 'Home', iconSource: getIconSource('home')}" name="homeTab">
    </page-router-outlet>

    <page-router-outlet *tabItem="{title: 'Away', iconSource: getIconSource('browse')}" name="awayTab">
    </page-router-outlet>

    <page-router-outlet *tabItem="{title: 'Matchup', iconSource: getIconSource('search')}" name="matchupTab">
    </page-router-outlet>
</TabView>

我在 matchup.component.ts 中还没有任何东西，因为我还没有弄明白。不过这里是：

import { Component, OnInit } from "@angular/core";
import { DataService } from "../core/data.service";
import { ActivatedRoute } from "@angular/router";

@Component({
    selector: "Matchup",
    moduleId: module.id,
    templateUrl: "./matchup.component.html"
})
export class MatchupComponent implements OnInit {

    constructor(
        private data: DataService,
        private route: ActivatedRoute
    ) { }

    homeTeam: any;
    awayTeam: any;
    isVisible = false;


    ngOnInit(): void {
    }

    getTeams() {
        this.homeTeam = this.data.getHomeTeam();
        this.awayTeam = this.data.getAwayTeam();
    }
}

我希望能够在选择选项卡时调用 getTeams()。

Answer 1

我相信 TabView 只会保留活动标签。这意味着每次您 select 一个新标签时，都会调用该标签的 ngAfterViewInit。

export class MatchupComponent implements AfterViewInit {
  ngAfterViewInit() {
    this.homeTeam = this.data.getHomeTeam();
    this.awayTeam = this.data.getAwayTeam();
  }
}

但是，根据您的数据模型，link 直接访问服务可能更有利。

export class MatchupComponent {
  get homeTeam(): Team {
    return this.data.getHomeTeam();
  }
  get awayTeam(): Team {
    return this.data.getAwayTeam();
  }
}

Answer 2

在你的 app.component 中使用 onSelectedIndexChanged 会这样吗？

onSelectedIndexChanged(args: SelectedIndexChangedEventData) {

    if (args.newIndex == 0)
        this.homeComponent.init();
    else if (args.newIndex == 1)
        this.awayComponent.init();
    else if (args.newIndex == 2)
        this.matchUpComponent.init();
}

Answer 3

您可以在此处使用的选项很少，

在每个组件中注入 Router 并订阅更改，当组件的路由匹配时执行您的函数。
在可以注入任何组件的服务中声明一个 BehaviorSubject。在 onSelectedIndexChanged 上将所选索引更新为 BehaviorSubject。如果给定的索引匹配，子组件可以订阅此 BehaviorSubject 并调用适当的函数。
ngrx 可以使这更简单。
您甚至可以将 AppComponent / TabView 注入到子组件构造函数中，并监听每个组件级别的索引变化。
您可以使用 Injector 在 onSelectedIndexChanged 事件中获取组件实例。

运行选择选项卡时的功能 - Angular2+NativeScript

Run function when tab is selected - Angular2+NativeScript

nativescript

angular2-nativescript

angular

运行 选择选项卡时的功能 - Angular2+NativeScript

Run function when tab is selected - Angular2+NativeScript

nativescript

angular2-nativescript

angular

运行选择选项卡时的功能 - Angular2+NativeScript