Question

我正在使用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

Answer 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变量。

掌握了输入绑定的基础知识后，您可以更改输入类型，并且通常将对当前页面组件的引用绑定。

大卫

Nativescript将参数传递给嵌套组件

1 个答案: