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

当前代码： 我有两个组件（appheader、appsearch），这两个组件都集成在app.component.html中，如下所示

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

以及下面给出的user.component.html代码

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

---

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

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

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

您可以使用以下任何方法设置此

show

标志

加载UserComponent时，可以使用@Output事件绑定发出false。您可以在UserComponent的ngOnInit（）方法上执行emit。然后在AppComponent中使用此发射值设置

show

标志

您可以在AppComponent.ts中使用路由器。当页面导航到“UserComponent”时，可以将

show

设置为false（在AppComponent.ts中）

您可以使用服务来完成这项工作。创建一个服务。在AppComponent和UserComponent中注入。 在服务中创建主题

让$showOrHideAppHEader=new Subject（）

。 在AppComponent中，在构造函数或ngOnInit中订阅

$showOrHideAppHEader

主题。

this.$showOrHideAppHEader.subscribe（（标志）=>{
this.show=flag；
});

---

加载UserComponent时，请执行以下操作：

$showOrHideAppHEader.next（false）

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

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

您可以使用以下任何方法设置此

show

标志

加载UserComponent时，可以使用@Output事件绑定发出false。您可以在UserComponent的ngOnInit（）方法上执行emit。然后在AppComponent中使用此发射值设置

show

标志

您可以在AppComponent.ts中使用路由器。当页面导航到“UserComponent”时，可以将

show

设置为false（在AppComponent.ts中）

您可以使用服务来完成这项工作。创建一个服务。在AppComponent和UserComponent中注入。 在服务中创建主题

让$showOrHideAppHEader=new Subject（）

。 在AppComponent中，在构造函数或ngOnInit中订阅

$showOrHideAppHEader

主题。

this.$showOrHideAppHEader.subscribe（（标志）=>{
this.show=flag；
});

---

当加载UserComponent时，执行以下操作：

$showOrHideAppHEader.next（false）

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

创建服务，它有一个初始值为true的

BehaviorSubject

属性，选择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;
 }
}

在UserComponent中，注入HeaderService并对从HeaderService.getHeaderFlag（）方法返回的

showOrHideHeader

BehaviorSubject执行

.next（false）

@组件({
选择器：“应用程序用户”，
模板：`User`，
提供者：[HeaderService]
})
导出类UserComponent实现OnInit{
构造函数（私有headerService:headerService）{}
ngOnInit（）：void{
让headerFlagsub=this.headerService.getHeaderFlag（）；
headerFlagsub.next（false）；
}
}

---

您可以在AppModule中提供

HeaderService

，这样就不必在这两个组件中提供

HeaderService

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

创建服务，它有一个初始值为true的

BehaviorSubject

属性，选择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;
 }
}

在UserComponent中，注入HeaderService并对从HeaderService.getHeaderFlag（）方法返回的

showOrHideHeader

BehaviorSubject执行

.next（false）

@组件({
选择器：“应用程序用户”，
模板：`User`，
提供者：[HeaderService]
})
导出类UserComponent实现OnInit{
构造函数（私有headerService:headerService）{}
ngOnInit（）：void{
让headerFlagsub=this.headerService.getHeaderFlag（）；
headerFlagsub.next（false）；
}
}

---

您可以在AppModule中提供

HeaderService

，这样就不必在这两个组件中提供

HeaderService

ur

app.component.html

是否有

？从逻辑上讲，您的代码没有问题。你能不能创建一个角度片段，在那里我们可以看到所有组件，等等？是的，我已经使用routerGoing到用户组件工作正常，但我需要在用户组件中隐藏标题和搜索组件。请先帮我理解这个问题。app.component.html具有-应用程序标题和应用程序搜索<代码>在user.component.html中，您试图再次添加应用程序标题和应用程序搜索，并试图隐藏它们<代码>ur

app.component.html

是否有

？从逻辑上讲，您的代码没有问题。你能不能创建一个角度片段，在那里我们可以看到所有组件，等等？是的，我已经使用routerGoing到用户组件工作正常，但我需要在用户组件中隐藏标题和搜索组件。请先帮我理解这个问题。app.component.html具有-应用程序标题和应用程序搜索<代码>在user.component.html中，您试图再次添加应用程序标题和应用程序搜索，并试图隐藏它们<代码>Basavaraj:，我已经在app.component.html中更新了以下代码。下面的代码在app.component.ts show中更新：bool