时间戳

首页 > 解决方案 > Nativescript (Angular 2) - 在特定组件中隐藏 app.component.html 的一些行

angular - Nativescript (Angular 2) - 在特定组件中隐藏 app.component.html 的一些行

问题描述

我想为特定组件隐藏 app.component.html 的一些行。

我有一些组件需要的底部导航栏。有些组件不应该显示导航栏。有什么方法可以将这些行隐藏在我的打字稿文件中的特定组件上？

app.component.html

<Gridlayout rows="*, auto">
    <page-router-outlet row="0"></page-router-outlet>

    <!-- Hide this -->
    <BottomNavigation row="1">
         // Code
    </BottomNavigation>
</GridLayout>

标签： angulartypescriptnativescript

解决方案

您可以创建一个可观察数据服务，以返回一个布尔值来切换BottomNavigator组件的可见性。

@Injectable() 
export class MessageService {
    private subject = new Subject<Boolean>();

    sendMessage(_value: boolean) {
        this.subject.next(_value);
    }

    clearMessage() {
        this.subject.next();
    }

    getMessage(): Observable<Boolean> {
        return this.subject.asObservable();
    }
}

然后在 App 组件中，可以订阅监听值并切换BottomNavigator组件。

MessageService.toggleService.subscribe(toShow => {
  this.isComponentShown = toShow;
});

// OR if using the prefered async pipe 
// https://angular.io/docs/ts/latest/guide/pipes.html
this.isComponentShown = this.toggleService.getMessage();

并且无论您需要显示什么，BottomNavigator您都可以设置 MessageService

this.toggleService.sendMessage(_val);

请在此处找到一个工作示例

推荐阅读