Nativescript(角度2)-在特定组件中隐藏app.component.html的某些行 [英] Nativescript (Angular 2) - Hide some lines of app.component.html in specific components

问题描述

我想隐藏app.component.html中某些特定组件的行.

I want to hide some lines of the app.component.html for specific components.

我有一些组件所需的底部导航栏.在某些组件中，导航栏不应显示.有什么办法可以隐藏我的打字稿文件中特定组件上的这些行?

I have a bottom-navigation-bar which some components need. there are some components where the navbar should not show up. Is there any way that I could hide these lines on specific components in my typescript file?

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>

推荐答案

您可以创建一个Observable Data Service，以返回一个布尔值来切换BottomNavigator组件的可见性.

You can create a Observable Data Service, to return a boolean value to toggle the visibility of the BottomNavigator component.

@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组件.

And then in the App component, you can subscribe to listen the value and toggle the BottomNavigator component.

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

And wherever you have to show the BottomNavigator you can set the MessageService

this.toggleService.sendMessage(_val);

请在此处

这篇关于Nativescript(角度2)-在特定组件中隐藏app.component.html的某些行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！