Nativescript 将参数传递给嵌套组件答案

【问题标题】：Nativescript pass parameter to nested componentNativescript 将参数传递给嵌套组件
【发布时间】：2018-05-10 17:31:55
【问题描述】：

我正在使用 angular 5 和 Nativescript 做一个应用程序。好吧，在应用程序中，我有不同的页面（组件），它们都有相同的底部菜单，即单个组件。我的问题是如何将参数传递给菜单组件，因为在菜单组件上我需要知道女巫是当前页面，例如为菜单的当前页面项设置一个活动类。

单页示例：

<Page>
    <ActionBar title="" class="action-bar">
        <StackPanel orientation="horitzontal">
            <Label class="action-title" text="Canciones"></Label>
        </StackPanel>
    </ActionBar>
    <StackLayout class="page">
    <ListView [items]="filteredSongs" class="songs-listview" (itemTap)="songClick($event)" *ngIf="!isLoading">
        <ng-template let-item="item">
            <StackLayout>
                <Label [text]='item.SON_NAME'></Label>
            </StackLayout>
        </ng-template>
    </ListView>
    <StackLayout verticalAlignment="center" *ngIf="isLoading" class="loading-stack">
        <ActivityIndicator busy="{{ isLoading }}"></ActivityIndicator>
    </StackLayout>
</StackLayout>
<main-menu></main-menu> // THE MENU COMPONENT

【问题讨论】：

标签： android angular mobile nativescript

【解决方案1】：

如果我理解正确，您的页面组件是父组件，主菜单是子组件。你想使用input binding。

1) 将主菜单标签更改为<main-menu [currentPage]="Canciones"></main-menu>。这将向主菜单组件发送一个输入，名称为 currentPage，值为 Canciones。

2) 接下来您需要更改 MainMenuComponent 以使用我们刚刚绑定的输入。

a) 添加import { Input } from '@angular/core';

b) 在组件类中，声明输入：@Input() currentPage: string;

c) 根据需要使用 currentPage 变量。

一旦您掌握了输入绑定的基础知识，您就可以更改输入类型并更通用地将引用绑定到当前页面组件。

大卫

【讨论】：