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

【问题标题】：Nativescript (Angular 2) - Hide some lines of app.component.html in specific componentsNativescript (Angular 2) - 在特定组件中隐藏 app.component.html 的一些行
【发布时间】：2019-02-01 17:33:19
【问题描述】：

我想为特定组件隐藏 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>

【问题讨论】：

在服务中使用行为主体，您可以将其与 BottomNavigation 的可见性属性绑定。当您在组件之间导航时，根据需要通过服务切换此行为主题值。

标签： angular typescript nativescript

【解决方案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();
    }
}

然后在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);

请找到一个工作示例here

【讨论】：

【解决方案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>

【讨论】：

*ngIf 可能不是一个好主意，因为它每次都会重新创建组件。