打开特定路线时，Angular如何隐藏全局组件？ [复制]

Posted 2023-03-13

【中文标题】打开特定路线时，Angular如何隐藏全局组件？ [复制]

【英文标题】：Angular how to hide a global component when a specific route is opened? [duplicate]

【发布时间】：2020-02-17 05:00:51

【问题描述】：

我不确定这是否可行，但我想在打开特定路线时隐藏一个全局组件。

比如说我有以下内容：

app.component.html

<app-header></app-header>

<app-banner></app-banner> <!-- Global Component I want to hide -->

<div class="body-container">
    <router-outlet></router-outlet>
</div>

<app-footer></app-footer>

app-routing.module.ts

import NgModule from '@angular/core';
import Route, RouterModule from '@angular/router';
import  StudentListComponent  from './Components/StudentList/StudentList.component';
import  SchoolMottoComponent  from './Components/SchoolMotto/SchoolMotto.component';

const routes: Routes = [
    path: 'StudentList', component: StudentListComponent ,
    path: 'SchoolMotto', component: SchoolMottoComponent 
];

@NgModule(
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
)

export class AppRoutingModule  
export const routingComponents = [StudentListComponent, SchoolMottoComponent]

有了这个，当我想查看 StudentList 组件时，默认情况下 url 变为 localhost4200:/StudentList 并且与 SchoolMotto 相同，它变为 localhost4200:/SchoolMotto。

在 StudentListComponent 中，是一个显示学生列表的 ag-grid，当您单击其中一个学生时，URL 会变成这样：localhost4200:/StudentList/view/cf077d79-a62d-46e6-bd94-14e733a5939d 和它是 SchoolList 的另一个子组件，用于显示该特定学生的详细信息。

当 url 具有以下内容时，我想隐藏全局横幅组件：localhost4200:/StudentList/view/cf077d79-a62d-46e6-bd94-14e733a5939d。仅当用户查看学生的具体详细信息时。

类似这样的：

app.component.html

<app-header></app-header>

**<app-banner *ngIf="router != '/StudentList/view/'"></app-banner> <!-- Global Component I want to hide -->**

<div class="body-container">
    <router-outlet></router-outlet>
</div>

<app-footer></app-footer>

这是否可行？如果是，如何？

【参考方案1】：

您可以在StudentList/view 中使用事件发射器或主题来发射事件，并使用 ngIf 隐藏横幅。

在您的学生列表中component.ts：

export class StudentList 
bannerSubject: Subject<any> = new Subject<any>();
ngOnInit() 
         bannerSubject.next(true);
    

在您的父组件中订阅它，您可以轻松隐藏横幅。

【讨论】：

编辑了我的答案，因为您的网址可以是动态的

你如何使用事件发射器来做到这一点？

见this

【参考方案2】：

您可以在component interation 的帮助下使用service 实现这一目标

您将在这里使用Rxjs Observables 的帮助

当您到达student view component 时，您将发出一个事件，然后在app component 中接收该事件，然后更改视图条件

新服务：

import  Injectable  from '@angular/core';
import  Subject     from 'rxjs';

@Injectable()
export class RouteService 

  private routeChangedSource = new Subject<string>();

  // Observable string streams
  routeChanged$ = this.routeChangedSource.asObservable();

  // Service message commands
  changeRoute(mission: string) 
    this.routeChangedSource.next(mission);
  

学生视图组件。

import  Component           from '@angular/core';

import  routeService      from './mission.service';

@Component(
)
export class MissionControlComponent implements ngOnInit
  constructor(private routeService: routeService) 

  ngOnInit() 
    this.routeService.changeRoute(mission);
  

应用组件：

import  Component, Input, OnDestroy  from '@angular/core';

import  RouteService  from './route.service';
import  Subscription    from 'rxjs';


export class AppComponent implements OnDestroy 
  studentView = false;
  constructor(private routeService: RouteService) 
    this.subscription = routeService.routeChanged$.subscribe(
      value => 
        this.studentView = true;
    );
  

  ngOnDestroy() 
    this.subscription.unsubscribe();
  

现在，您的应用组件可以是：

<app-header></app-header>

<app-banner *ngIf="!studentView"></app-banner>

<div class="body-container">
    <router-outlet></router-outlet>
</div>

<app-footer></app-footer>

【参考方案3】：

<app-header></app-header>

<app-banner *ngIf="myService.hideGlobalComp"></app-banner> <!-- Global Component I want to hide -->

<div class="body-container">
    <router-outlet></router-outlet>
</div>

<app-footer></app-footer>

在ts文件中：

onCellClicked($event)  // place into your method there you want. 

    this.route.parent.url.subscribe(urlPath => 
      this.url = urlPath[urlPath.length - 1].path;
    );

   if(this.url === 'StudentList/view') 
  this.myService.hideGlobalComp = true;

【讨论】：

这个 URL 部分是 cf077d79-a62d-46e6-bd94-14e733a5939d 是动态的，它每次都在变化

【参考方案4】：

在你的 ts 文件中这样做。

添加新变量router: string; 在结构中添加这个

constructor(private _router: Router) this.router = _router.url;

然后在 html 中使用相同的代码。 如果这不起作用，请告诉我。

【讨论】：

为什么要投反对票。检查这个网址 - ***.com/questions/47707225/…，我提供了相同的解决方案。

你只是投了反对票，没有任何评论。