Nativescript (Angular 2) - скрывает некоторые строки app.component.html в определенных компонентах

Question

Я хочу скрыть некоторые строки app.component.html для определенных компонентов.

У меня есть нижняя панель навигации, которая нужна некоторым компонентам.Есть некоторые компоненты, где Navbar не должен отображаться.Можно ли как-нибудь скрыть эти строки в определенных компонентах моего файла машинописи?

app.component.html

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

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

Answer 1

Вы можете создать службу наблюдаемых данных, чтобы возвращать логическое значение для переключения видимости компонента 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();
    }
}

А затем в компоненте приложения вы можете подписаться на прослушивание значенияи переключите компонент 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);

. Найти рабочий пример здесь

Answer 2

используйте * ngIf в шаблоне и определите логическую переменную внутри вашего компонента, например

bottomNav = false;

, вы можете установить ее значение true позже в компоненте после проверки.А в твоем шаблоне делай как

<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>