编辑

Question

我创建了一个在AppComponent中具有菜单的应用程序，这意味着所有子页面/组件都将根据下一个伪代码拥有该菜单：

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

现在我需要一个没有菜单的新页面。我该如何实现？

我希望已经很好地解释了我的问题。预先感谢。

Answer 1

我为您提供了一个small app，向您展示了如何实现自己的行为

编辑

说明

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

当您需要隐藏/显示菜单时，可以使用生命周期挂钩 OnInit和OnDestroy。

OnInit：该组件需要隐藏菜单，使用您的服务。
OnDestroy组件不再存在，您需要返回菜单，使用服务。

Answer 2

这是您认为更常见的情况，例如要隐藏在app.component.html或login.component上的register.component侧菜单之类的情况，希望实现。

我特别喜欢这样做的方式是，有一个我称为@injectable({})的{{1}}服务，该服务会根据需要传递给组件。

尝试以下操作：

app.component.html

menu.service

菜单服务

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

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

no-menu.component.ts

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

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

希望这对您有所帮助，您可以根据需要进行调整：）

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

2 个答案:

编辑