Question

我在角度上是新事物，并且知道我的问题的答案，我相信它将使我学到很多东西。在我的默认组件中，MainComponent已加载到我的<router-outlet>中，在此级别上，menu和footer均被显示。我希望在显示为{strong> NOT MainComponent的任何组件中显示 ONLY ，但是在我回到AnotherComponent不会。我怎样才能做到这一点？我已经尝试过MainComponent，但它对我不起作用（我认为它不止于此）

这是我的代码的一部分：

ngIf

<menu (setAnimal)='setAnimal($event)' ></menu>
<router-outlet (activate)='onActivate($event)'></router-outlet>

这是我的实时代码：

https://stackblitz.com/edit/angular-qcxnln

谢谢

Answer 1

如果我很好理解，如果您将路由器注入到AppComponent中

：

constructor(private router: Router){
    router.events.subscribe(e => {
    if(e instanceof NavigationEnd){
      if(e.urlAfterRedirects != '/'){
        this.headerFooterVisible= true;
      }else{
        this.headerFooterVisible= false;
      }

    }
  });

您可以订阅路由事件，因此请检查您是否在根路径中。然后加上几个ngIf：

<menu (setAnimal)='setAnimal($event)' *ngIf="headerFooterVisible"></menu>
<router-outlet (activate)='onActivate($event)'></router-outlet>
<footer *ngIf="headerFooterVisible"></footer>

StackBlitz

Answer 2

使用else{ Browser.msgBox("XXXXXXXXXXXXX"); / *enter the loop code here*在onActivate的{{1}}钩子中获取组件名称，并进行相应的比较。

工作样本= https://stackblitz.com/edit/angular-r8pnot

Answer 3

您可以将“菜单”和“页脚”放在“另一个组件”中，将其作为页面模板。对于您要显示的页面，例如“其他组件”（显示菜单和页脚），请使用“子级”

 const appRoutes: Routes = [
    { path: '', component: MainComponent },
    { 
      path: 'another',
      component: AnotherComponent,
      children: [
         path: 'something',
         component: SomeComponent
      ]
  }
];

如何根据当前组件隐藏/显示组件？

3 个答案: