Javascript 当打开特定管线时，如何隐藏全局组件？

我不确定这在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-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>

这样，当我想查看StudentList组件时，默认情况下url变成localhost4200:/StudentList，与校训相同，它变成localhost4200:/Schoolmott

在StudentListComponent中，是一个显示学生列表的ag网格，当您单击其中一个学生时，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></app-banner> <!-- Global Component I want to hide -->

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

<app-footer></app-footer>

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

** **

---

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

当您在

学生列表/视图中时，可以使用事件发射器或主题发出事件，并使用ngIf隐藏横幅

<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
中：

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

导出班级学生列表{
bannerSubject:Subject=新主题（）；
恩戈尼尼特（）{
bannerSubject.next（true）；
}
}

在父组件中订阅此选项，您可以轻松隐藏横幅。
当您在
学生列表/视图中时，可以使用事件发射器或主题发出事件，并使用ngIf隐藏横幅

<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
中：

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

导出班级学生列表{
bannerSubject:Subject=新主题（）；
恩戈尼尼特（）{
bannerSubject.next（true）；
}
}

在父组件中订阅此内容，您可以轻松隐藏横幅。
在ts文件中，您可以这样做

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

添加新变量
router:string

外接程序构造添加此
构造函数（专用路由器：路由器）{
this.router=\u router.url；
}

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

添加新变量
router:string

外接程序构造添加此
构造函数（专用路由器：路由器）{
this.router=\u router.url；
}

然后在HTML中使用相同的代码。
如果这不起作用，请告诉我。
您可以借助
组件交互
使用
服务

您将在此处使用
Rxjs observatives
的帮助

当您到达
学生视图组件时，您将发出一个事件，然后在
应用程序组件中接收该事件，然后更改视图条件

新服务：

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

您可以借助
组件交互
使用
服务

您将在此处使用
Rxjs observatives
的帮助

当您到达
学生视图组件时，您将发出一个事件，然后在
应用程序组件中接收该事件，然后更改视图条件

新服务：

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


此URL部分是一个cf077d79-a62d-46e6-bd94-14e733a5939d是动态的每次更改此URL部分是一个cf077d79-a62d-46e6-bd94-14e733a5939d是动态的每次更改编辑我的答案是因为您的URL可以是动态的您使用事件发射器吗？请参阅编辑的我的答案，因为您的URL可以是动态的您使用事件发射器吗排放者？看看为什么要投否决票。。检查此url-，我提供了相同的解决方案。你只是投了反对票，没有任何评论。为什么投反对票。。检查这个url-，我提供了相同的解决方案。你只是投了反对票，没有任何评论。