Nativescript (typescript) 我如何 access/get 来自不同组件的组件的 instance/reference？

Question

我试图从 TabView 中的 tabItem 组件（Class 实例）访问 ActionBar 中 NavigationButton 和 SearchBar 的组件（Class 实例）。我该怎么做？

<ActionBar color="black" title="">
    <NavigationButton #navBtn text="Go Back" android.systemIcon="ic_menu_back" (tap)="goBack()" [visibility]="navBtnVisibility"></NavigationButton>
    <StackLayout *ngIf="tabIndex == 0" titleView orientation="horizontal">
        <SearchBar hint="Search hint" [text]="searchPhrase" (textChange)="onTextChanged($event)" (submit)="onSubmit($event)" 
        color="black" textFieldHintColor="black"></SearchBar>
    </StackLayout>
</ActionBar>

<TabView #tabView [selectedIndex]="tabIndex" (selectedIndexChanged)="tabViewIndexChange(tabView.selectedIndex)">
    <StackLayout *tabItem="{title: 'Search'}" class="tab-item">
        <search-tab>
        </search-tab>
    </StackLayout>
    <StackLayout *tabItem="{title: 'Home'}" class="tab-item">
        <home-tab>
        </home-tab>
    </StackLayout>
    <StackLayout *tabItem="{title: 'Profile'}" class="tab-item">
        <!--<profile></profile>-->
        <profile-tab>
        </profile-tab>
    </StackLayout>
</TabView>

Answer 1

实现此目的的一种可能方法是使用服务，从父组件绑定您的引用，然后在您的子组件中注入该服务。

Answer 2

组件到组件的通信仅发生在 Angular 2+ 中的直接 parent-child 关系之间。否则，您必须将 Angular 服务用作 go-between。

因此，如图所示的组件可以使用@ViewChild() 访问 ActionBar 和 TabView，并且 ActionBar 组件可以使用 @ContentChild() 访问 NavigationButton，因为 NavigationButton 在 <ActionBar> 和 </ActionBar>, 之间，但是很好parent、兄弟姐妹和堂兄弟关系需要服务 go-between。

AngularJS 有 $parent.$parent.$parent 东西，但由于架构不佳而被样式指南弃用。

Answer 3

可以使用 ViewChild / ContentChild 甚至服务。但最简单的方法是访问框架包，

const currentPage = frame.topmost().currentPage

获取当前页面后，您可以访问它的操作栏或页面内的任何组件。

Nativescript (typescript) 我如何 access/get 来自不同组件的组件的 instance/reference？

Nativescript (typescript) How do I access/get the instance/reference of a component from a different component?

typescript

nativescript

angular2-nativescript

nativescript-angular