0

我正在尝试从 TabView 中的 tabItem 的组件（类实例）访问 ActionBar 中的 NavigationButton 和 SearchBar 的组件（类实例）。我该怎么做呢？

<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>
4

3 回答 3

1

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

于 2018-03-11T20:48:07.790 回答
1

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

const currentPage = frame.topmost().currentPage

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

于 2018-03-11T22:23:41.000 回答
0

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

因此，图中的组件可以使用@ViewChild() 访问ActionBar 和TabView，并且ActionBar 组件可以使用@ContentChild() 访问NavigationButton，因为NavigationButton 是介于两者之间的<ActionBar>，</ActionBar>,但是祖父母、兄弟姐妹和表亲关系需要服务中间人。

AngularJS 有 $parent.$parent.$parent 的东西，但它被风格指南弃用，因为它的架构很差。

于 2018-03-11T22:14:05.290 回答