Question

我对Angular很熟悉，但是我刚开始学习NativeScript。我有一个使用NativeScript库中的选项卡模板的选项卡界面。我想在选择选项卡时运行一个功能，但无法确定它。

这是app.component.html：

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

我到目前为止在matchup.component.ts中还没有任何东西，因为我还不能弄清楚。不过这里是：

Except

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

Answer 1

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

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

Answer 2

我相信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();
  }
}

Answer 3

是否会像这样来在您的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();
}

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

3 个答案: