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

Question

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

比如说我有以下内容：

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>

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

Answer 1

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

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

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

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

Answer 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>

Answer 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;
}

}

}

Answer 4

在你的 ts 文件中这样做。

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

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

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