选择选项卡时运行功能 - 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

您可以在这里使用的选项很少，

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