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

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

const currentPage = frame.topmost().currentPage

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

Answer 3

组件与组件的通信仅发生在Angular 2+中的直接父子关系之间。否则，您必须使用Angular服务作为中间人。

因此，所描绘的组件可以访问动作条和TabView的与@ViewChild（），并在ActionBar组件可以与@ContentChild（）访问NavigationButton因为NavigationButton为<ActionBar>和</ActionBar>,，但祖父母，兄弟之间和堂兄的关系需要服务中介。

AngularJS有$ parent。$ parent。$ parent的东西，但它被不良架构的样式指南所弃用。

Nativescript（typescript）如何从不同的组件访问/获取组件的实例/引用？

3 个答案: