1

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

比如说我有以下内容：

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>

应用程序路由.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>

这是可行的还是不可行的？如果是，怎么做？

4

4 回答 4

1

您可以使用事件发射器或主题在您进入时发出事件StudentList/view并使用 ngIf 隐藏横幅。

在您的 StudentList 中component.ts：

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

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

于 2019-10-21T06:16:34.237 回答
1

您可以借助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>
于 2019-10-21T06:30:55.887 回答
-1 
<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;
}

}

}
于 2019-10-21T06:20:12.133 回答
-1

在你的 ts 文件中这样做。

  1. 添加新变量router: string;
  2. 添加建设添加这个

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

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

于 2019-10-21T06:21:57.763 回答