Question

当前代码： 我有两个组件（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>

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

Answer 1

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

创建具有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。

Answer 2

问题是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标记。

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

加载UserComponent后，请$showOrHideAppHEader.next(false)。

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

2 个答案: