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

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

我有一些组件需要的底部导航栏。有些组件不应显示导航栏。有没有办法在我的typescript文件中隐藏特定组件上的这些行

app.component.html

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

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

//代码

在模板中使用*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并在组件中定义一个布尔变量，如

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>

//代码

您可以创建一个可观察的数据服务，以返回一个布尔值来切换

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

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

---

请查找一个工作示例

您可以创建一个可观察的数据服务，以返回一个布尔值来切换

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

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

---

请查找一个工作示例

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

*ngIf

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

*ngIf

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