当前代码: 我有两个组件(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>
但是标题和搜索组件显示,在使用导航到用户时,请帮我隐藏搜索和标题组件吗?
答案 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-search></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-search></div>
您可以使用以下任何方法设置此show
标记。
show
标志。show
设置为false(在AppComponent.ts中)。let $showOrHideAppHEader = new Subject<boolean>()
。
在AppComponent中,在构造函数或ngOnInit中订阅$showOrHideAppHEader
主题。
this.$showOrHideAppHEader.subscribe((flag) => {
this.show = flag;
});
加载UserComponent后,请$showOrHideAppHEader.next(false)
。