选择tab时运行函数-Angular2+；NativeScript

我熟悉Angular，但我刚刚开始学习NativeScript。我有一个使用NativeScript库中的选项卡模板的选项卡界面。当我的标签被选中时，我想运行一个函数，但是我很难找到它

以下是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>

---

我希望在选择选项卡时能够调用getTeams（）。

我认为

TabView

只保留活动选项卡。这意味着每次选择新选项卡时，都会调用该选项卡的

ngAfterViewInit

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

但是，根据您的数据模型，直接链接到服务可能更为有益

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

---

我相信

TabView

只保留活动选项卡。这意味着每次选择新选项卡时，都会调用该选项卡的

ngAfterViewInit

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

但是，根据您的数据模型，直接链接到服务可能更为有益

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

---

在你的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();
}

---

在你的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();
}

---

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

在每个组件中插入

路由器

，并订阅更改，在路由与组件匹配时执行您的功能

在服务中声明一个

BehaviorSubject

，您可以将其注入任何组件。在

onSelectedIndexChanged

上，将所选索引更新到该

BehaviorSubject

。如果给定的索引匹配，子组件可以订阅此

BehaviorSubject

，并调用适当的函数

ngrx

可以让这更简单

您甚至可以将AppComponent/TabView注入子组件构造函数，并监听每个组件级别的索引更改

您可以在

onSelectedIndexChanged

事件中使用获取组件实例

---

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

在每个组件中插入

路由器

，并订阅更改，在路由与组件匹配时执行您的功能

在服务中声明一个

BehaviorSubject

，您可以将其注入任何组件。在

onSelectedIndexChanged

上，将所选索引更新到该

BehaviorSubject

。如果给定的索引匹配，子组件可以订阅此

BehaviorSubject

，并调用适当的函数

ngrx

可以让这更简单

您甚至可以将AppComponent/TabView注入子组件构造函数，并监听每个组件级别的索引更改

您可以在

onSelectedIndexChanged

事件中使用获取组件实例

---

这真的有效吗？据我所知，

page router outlet

严格用作顶级元素，如果您希望与页面上的组件具有相同的功能，您应该使用

router outlet

。是的，它可以工作。它在我的所有组件之间切换。我使用此模板开始。这真的有效吗？据我所知，

page router outlet

严格用作顶级元素，如果您希望与页面上的组件具有相同的功能，您应该使用

router outlet

。是的，它可以工作。它在我的所有组件之间切换。我使用此模板开始。我现在没有使用像你第二个建议那样的类模式。所以，我不确定我是否可以使用这个方法，除非我创建了一个。对于第一个，ngAfterViewInit在初始加载时被调用一次。不幸的是，我没有在每次选择该选项卡时再次调用它。好吧，您可以用

any

替换

Team

。我只是想带你去上课我很感激。如果需要，我非常愿意更改选项卡结构。我只是不知道如何做到这一点，并且想知道是否有其他方法可以先使用。我目前没有使用像你的第二个建议那样的类模式。所以，我不确定我是否可以使用这个方法，除非我创建了一个。对于第一个，ngAfterViewInit在初始加载时被调用一次。不幸的是，我没有在每次选择该选项卡时再次调用它。好吧，您可以用

any

替换

Team

。我只是想带你去上课我很感激。如果需要，我非常愿意更改选项卡结构。我只是不知道怎么做，并且想知道是否有其他的方法。我得到

TypeError:undefined不是一个对象（评估'this.matchUpComponent.getTeams'）

尝试此方法时，您可能需要导入matchUpComponent并将其添加到构造函数中，以访问itI中的函数。我认为这不会仍然有效，这些组件在创建app component/TabView期间将不活动，它将处于稍后状态。我得到

类型错误：undefined不是对象（正在评估'this.matchUpComponent.getTeams'）

尝试此方法时，您可能需要导入matchUpComponent并将其添加到构造函数中，以访问itI中的函数。我不认为这仍然有效，在创建应用程序组件/选项卡视图期间，这些组件将不会处于活动状态，它将处于稍后状态。最终使用了此答案中的#2最终使用了此ans中的#2wer