Question

我想隐藏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>

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

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

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>

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

2 个答案: