Angular 5 + NativeScript：如何向嵌套菜单组件传递参数

嘿，这个需求我之前做NativeScript项目时也碰到过，给你分享两种简单靠谱的实现方式，都能轻松让底部菜单识别当前页面并高亮对应的菜单项~

方法一：通过@Input()手动传递当前页面标识 #

这种方式适合页面数量不多，或者需要自定义页面标识的场景，步骤很清晰：

1. 改造底部菜单组件，添加输入属性 #

在你的main-menu.component.ts里，添加一个@Input()属性来接收父页面传来的当前页标识：

import { Component, Input } from "@angular/core";

@Component({
    selector: "main-menu",
    templateUrl: "./main-menu.component.html"
})
export class MainMenuComponent {
    // 接收父组件传递的当前页面标识，比如'songs'、'home'等
    @Input() currentPage: string;
}

2. 在菜单模板中绑定激活样式 #

在main-menu.component.html里，给每个菜单项绑定class，判断当前页标识是否匹配，匹配则添加active类：

<StackLayout orientation="horizontal" class="main-menu">
    <Label 
        text="首页" 
        [class.active]="currentPage === 'home'" 
        class="menu-item"
        (tap)="navigateTo('/home')"
    ></Label>
    <Label 
        text="歌曲" 
        [class.active]="currentPage === 'songs'" 
        class="menu-item"
        (tap)="navigateTo('/songs')"
    ></Label>
    <Label 
        text="我的" 
        [class.active]="currentPage === 'profile'" 
        class="menu-item"
        (tap)="navigateTo('/profile')"
    ></Label>
</StackLayout>

3. 在父页面中传递当前页标识 #

回到你提供的页面代码，修改<main-menu>标签，传入当前页面的标识：

<Page> 
    <ActionBar title="" class="action-bar"> 
        <StackPanel orientation="horizontal"> 
            <Label class="action-title" text="Canciones"></Label> 
        </StackPanel> 
    </ActionBar> 
    <StackLayout class="page"> 
        <!-- 页面原有内容 -->
    </StackLayout> 
    <!-- 传递当前页面标识为'songs' -->
    <main-menu [currentPage]="'songs'"></main-menu> 
</Page>

方法二：利用路由自动监听当前页面 #

如果你的项目路由结构清晰，这种方式更自动化，不用手动在每个页面传值，菜单会自动识别当前路由：

1. 在菜单组件中监听路由变化 #

修改main-menu.component.ts，注入Router并监听路由事件，自动提取当前页面标识：

import { Component, OnInit } from "@angular/core";
import { Router, NavigationEnd } from "@angular/router";
import { filter } from "rxjs/operators";

@Component({
    selector: "main-menu",
    templateUrl: "./main-menu.component.html"
})
export class MainMenuComponent implements OnInit {
    currentPage: string;

    constructor(private router: Router) {}

    ngOnInit() {
        // 监听路由导航完成事件，过滤出NavigationEnd类型的事件
        this.router.events.pipe(
            filter(event => event instanceof NavigationEnd)
        ).subscribe((event: NavigationEnd) => {
            // 从路由路径中提取最后一段作为页面标识，比如'/songs'就取'songs'
            const urlParts = event.urlAfterRedirects.split('/');
            this.currentPage = urlParts[urlParts.length - 1];
        });
    }

    // 可选：添加导航方法
    navigateTo(path: string) {
        this.router.navigate([path]);
    }
}

2. 菜单模板保持不变 #

模板和方法一的一样，不用做任何修改，而且父页面里也不用传值了，直接写<main-menu></main-menu>就行，路由变化时菜单会自动更新激活状态。

最后：添加激活态样式 #

记得在全局样式文件（比如app.css）里定义active类的样式，让高亮效果生效：

.main-menu {
    padding: 10;
    background-color: #fff;
    border-top: 1px solid #eee;
}

.menu-item {
    flex: 1;
    text-align: center;
    padding: 10;
    color: #666;
}

.menu-item.active {
    color: #1668dc; /* 激活态文字颜色 */
    font-weight: bold;
}

这样两种方法都能实现你要的效果，选哪种看你的项目需求就好~

内容的提问来源于stack exchange，提问作者Toni