原生脚本(角度2) -隐藏特定组件中的某些app.component.html行

Question

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

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

请找到一个有效的here示例

Answer 2

在模板中使用*ngIf并在组件中定义一个布尔变量，如下所示

bottomNav = false;

您可以稍后在component中检查后将其设置为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>