如何使用导航隐藏其他组件中的标题和搜索组件?

时间:2017-07-13 13:52:17

标签: angular

当前代码: 我有两个组件(app-header,app-search),两个组件都集成在app.component.html中,如下所示。

<app-header></app-header><app-search></app-search>

我正在使用导航转到其他组件,例如user:app-user。

问题: 问题是我试图隐藏标题和搜索组件,如使用下面的代码 在user.component.ts中:

show: boolean = false;

和user.component.html代码编写如下:

<div *ngIf="show"><app-header></app-header><app-search></app-search></div>

但是标题和搜索组件显示,在使用导航到用户时,请帮我隐藏搜索和标题组件吗?

2 个答案:

答案 0 :(得分:2)

您可以通过这种方式实现解决方案。

创建具有BehaviorSubject<boolean>属性且初始值为true的服务,选择BehaviorSubject是因为它在第一次订阅BehaviorSubject时会发出默认值。

@Injectable()
export class HeaderService {
 private showOrHideHeader = new BehaviorSubject<boolean>(true); // First 
 subscription value will be true.
 // This method returns a BehaviorSubject that you can subscribe to, or emit new value from.
 getHeaderFlag() {
  return this.showOrHideHeader;
 }
}

在AppComponent中注入HeaderService。并在ngOnInit中订阅showOrHideHeader BehaviorSubject。您可以通过调用this.headerService.getHeaderFlag()

来获取showOrHideHeader
@Component({
 selector: 'my-app',
 template:`<div *ngIf="show"> <app-header></app-header> <app-search> </app-sear‌​ch></div>,`
providers: [HeaderService]
})
export class AppComponent implements OnInit {
 private show: boolean = true;
 constructor(private headerService : HeaderService ) { }

 ngOnInit(): void {
   this.headerService.getHeaderFlag().subscribe((flag)=>{
   this.show = flag;
 });
}
}

在UserComponent中,注入HeaderService并对从headerService.getHeaderFlag()方法返回的.next(false) BehaviorSubject执行showOrHideHeader

@Component({
selector: 'app-user',
template: `<div> User </div>`,
providers: [HeaderService]
})
export class UserComponent implements OnInit {
 constructor(private headerService : HeaderService ) { }

 ngOnInit(): void {
  let headerFlagSubj = this.headerService.getHeaderFlag();
  headerFlagSubj.next(false);
 }
}

您可以在AppModule中提供HeaderService,因此您无需在这两个组件中提供HeaderService

答案 1 :(得分:0)

问题是app-header和app-search在app-component.html中。 您没有在AppComponent中指定是否在app-component.html中显示app-header和app-search。 你可以做的一件事是,在app-component.html中使用一个标志,如下所示。

<div *ngIf="show"><app-header></app-header><app-search></app-sear‌​ch></div>

您可以使用以下任何方法设置此show标记。

  1. 加载UserComponent时,可以使用@Output事件绑定发出 false 。您可以在UserComponent的ngOnInit()方法上执行发射。然后在AppComponent中使用此发出的值来设置show标志。
  2. 您可以在AppComponent.ts中使用路由器。当页面导航到&#34; UserComponent&#34;时,您可以将show设置为false(在AppComponent.ts中)。
  3. 您可以使用服务来执行此操作。创建服务。在AppComponent和UserComponent中注入。 在服务中创建主题 let $showOrHideAppHEader = new Subject<boolean>()。 在AppComponent中,在构造函数或ngOnInit中订阅$showOrHideAppHEader主题。 this.$showOrHideAppHEader.subscribe((flag) => { this.show = flag; });
  4. 加载UserComponent后,请$showOrHideAppHEader.next(false)