Angular 如何在打开特定路由时隐藏全局组件？

Question

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

例如我有以下内容：

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

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

在你的ts文件中这样做。

添加新变量router: string;
添加构造添加这个

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

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

Answer 4

您可以在 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 组件 可以是：

<app-header></app-header>

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

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

<app-footer></app-footer>

Angular 如何在打开特定路由时隐藏全局组件？

Angular how to hide a global component when a specific route is opened?

javascript

angular

angular-ui-router

angular7-router