在路由器负载上，我可以有条件地删除 parent

Question

这是我的 component.html 文件，

<content-placeholder></content-placeholder>
<router-outlet></router-outlet>

我的请求是，当 <router-outlet></router-outlet> 处于活动状态时，有什么方法可以删除或隐藏 <content-placeholder></content-placeholder> 吗？我正在用 router-outlet 加载 children，但我需要使用整页。

这是我的 router.ts 文件：

{
  path: 'cpServices', //needs this parent
  component: CpServiceComponent,
  children: [
    {
      path: '',
      redirectTo: 'contentPlaceHolder',
      pathMatch: 'full'
    },
    {
      path: 'contentPlaceHolder',
      component: ShellContentPlaceholderComponent,
      children: [
        {
          path: 'view',
          component: ShellViewContentPlaceholderComponent
        },
        {
          path: 'create',
          component: ShellCreateContentPlaceholderComponent
        },

      ]
    }

Answer 1

在app.component.ts文件中，你可以做这样的事情，

import { Router, NavigationStart, NavigationEnd, Event as NavigationEvent } from '@angular/router';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})

export class AppComponent {
  hideComponent: boolean = false;
  
  constructor(private router: Router) {
    router.events.forEach((event: NavigationEvent) => {
      if (event instanceof NavigationStart) {
        if (window.location.href.indexOf('cpServices') > -1) {
          this.hideComponent = true;
        }
      }
    });
  }
}

<div *ngIf=!hideComponent>
  <content-placeholder></content-placeholder>
</div>
<router-outlet></router-outlet>

在路由器负载上，我可以有条件地删除 parent

on Router load, can I conditionally remove the parent

angular-routing

angular

angular-router

angular8