活动组件的TabView ActionBar调用方法

Question

我正在使用使用嵌套路由器的TabView加载各种组件。我目前有一个ActionBar，可以根据打开的选项卡动态更新其标题和可见按钮。我是通过听onIndexChanged事件来做到这一点的。

tabs.component.html：

<ActionBar class="action-bar">
    <Label class="action-bar-title"
        [text]="title"></Label>

    <ActionItem ios.systemIcon="2"
        android.systemIcon="ic_menu_edit"
        visibility="{{ title=='Profile' ? 'visible' : 'collapse' }}"
        [nsRouterLink]="['/tabs', {outlets: {profileoutlet: 'profile/edit'}}]"></ActionItem>

    <ActionItem (tap)="onSave()"
        ios.systemIcon="3"
        android.systemIcon="ic_menu_save"
        ios.position="right"
        visibility="{{ title=='Edit Profile' ? 'visible' : 'collapse' }}" >
        </ActionItem>

    <ActionItem ios.systemIcon="1"
        android.systemIcon="ic_menu_close_clear_cancel"
        visibility="{{ title=='Edit Profile' ? 'visible' : 'collapse' }}"
        [nsRouterLink]="['/tabs', {outlets: {profileoutlet: 'profile'}}]">
        </ActionItem>

</ActionBar>

<TabView androidTabsPosition="bottom"
    (selectedIndexChange)="onIndexChanged($event)">
    <StackLayout *tabItem="{title: 'Profile'}">
        <router-outlet name="profileoutlet"></router-outlet>
    </StackLayout>
    <StackLayout *tabItem="{title: 'Feed'}">
        <router-outlet name="feedoutlet"></router-outlet>
    </StackLayout>
    <StackLayout *tabItem="{title: 'Shop'}">
        <router-outlet name="shopoutlet"></router-outlet>
    </StackLayout>
</TabView>

您可以看到，点击“编辑配置文件”按钮会将其中一个标签导向新页面，然后显示“保存”和“取消”按钮。

我希望能够单击操作栏上的保存按钮，并使其在编辑配置文件组件中调用save方法。

我在这里很挣扎，因为ActionBar在我的选项卡组件的范围内，它无法“查看”编辑配置文件组件，并且我不知道如何获得对“编辑配置文件”组件的“访问”权它的方法。

tabs.component.ts：

import { Component, OnInit } from "@angular/core";
import { TabView, TabViewItem, SelectedIndexChangedEventData } from "ui/tab-view";
import { RouterExtensions } from "nativescript-angular/router";
import { UserService } from "../../services/auth/user.service";

@Component({
    selector: "Tabs",
    moduleId: module.id,
    templateUrl: "./tabs.component.html"
})
export class TabsComponent implements OnInit {
    title: string;
    RouterExtensions: RouterExtensions;
    UserService: UserService;

    constructor(
        private routerExtensions: RouterExtensions,
        private userService: UserService
    ) {
        this.RouterExtensions = routerExtensions;
        this.UserService = userService;
    }

    ngOnInit(): void {
    }

    onIndexChanged(args) {
        let tabView = <TabView>args.object;
        let item: TabViewItem = tabView.items[tabView.selectedIndex];
        this.title = item.title;
    }

    onSave() {
        //somehow call the edit-profile `saveUser()` method from here
    }

    setTitle(title) {
        this.title = title;
    }
}

我尝试调用tabView.getViewById()，但是我实际上无法弄清楚组件ID是什么，然后知道如何在该ViewBase对象上调用方法。