Nativescript (Angular 2) - Hide some lines of app.component.html in specific components

问题

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

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

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

回答1:

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();
    }
}

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();

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

this.toggleService.sendMessage(_val);

Please find a working example here

回答2:

use *ngIf in template and define a boolean variable inside your component like

bottomNav = false;

you can set it to true later in component upon your checks. And in your template do as

<Gridlayout rows="*, auto">
<page-router-outlet row="0"></page-router-outlet>
<!-- Hide this -->
<div *ngIf="bottomNav;then showNav"></div>
<ng-template #showNav> 
<BottomNavigation row="1">
// Code
</BottomNavigation>
</ng-template>
</GridLayout>

来源：https://stackoverflow.com/questions/54484433/nativescript-angular-2-hide-some-lines-of-app-component-html-in-specific-com

标签

angular

typescript

nativescript