如何在 AppComponent 级别有不同的布局？

Question

我创建了一个在 AppComponent 中有菜单的应用程序，这意味着所有子 pages/components 将根据下一个伪代码拥有它：

<menu></menu> <--I need this removed in the new page-->
<router-outlet></router-outlet>

现在我需要一个没有菜单的新页面。我怎样才能实现它？

我希望已经很好地解释了我的问题。提前致谢。

Answer 1

我给你做了一个small app来告诉你如何实现你的行为

编辑

说明

您创建一个服务并将该服务注入您的 app.component。根据您订阅的可观察值，您将在 app.component.html 中使用此服务来显示或不显示菜单。

当您需要 hide/show 菜单时，您可以使用 生命周期挂钩 OnInit 和 OnDestroy。

OnInit : 组件需要隐藏菜单，使用您的服务。
OnDestroy组件不存在，需要带回菜单，使用你的服务。

Answer 2

这比您想象的更常见，例如您想要隐藏在 login.component 或 register.component 上的 app.component.html 侧边菜单等场景具有您想要的行为正在寻求实现。

我特别这样做的方式是，有一个我称之为 menu.service 的 @injectable({}) 服务，它会根据需要传递给组件。

尝试以下操作：

app.component.html

<div class="appComponent">
   <div class="sideMenu" *ngIf="menuService.show">
          ...
   </div>
</div>

menu.service

@Injectable({
    providedIn: 'root'
})
export class MenuService {
    public shown = false;
    constructor(){}

    setShown(bool:boolean){
        this.shown = bool;
    }    
}

此菜单服务可以注入到您要隐藏的组件的构造函数中，并且可以使用 onInit 和 onDestroy 处理程序打开/关闭

no-menu.component.ts

@Component({
  ...
})
export class NoMenuComponent implements OnInit, OnDestroy {
    constructor(public menuService: MenuService){}

    ngOnInit() {
        this.menuService.setShown(false);
    }
    ngOnDestroy(){
        // Recovers menu on exiting component
        this.menuService.setShown(true);
    }

}

希望这对您有所帮助，您可以根据自己的需要进行调整:)

如何在 AppComponent 级别有不同的布局？

How to have a different layout at AppComponent level?

router-outlet

angular

编辑