angular - 如何在其他组件中排除app.component.html的代码

app.component.html是我们的默认组件，其中添加了一个菜单，但我不希望将其包含在其他组件中。

我该怎么做？

问题是当我加载newsection.component.html时，它在顶部显示app.component.html，如下所示:



如何限制它，使其不加载到editsection.component.html之上？

最佳答案

您可以组合Dhyey和Hamed Baatour的答案。

首先，为菜单创建一个单独的组件(例如menu.component.ts)，然后将所有代码放入其中。

然后修改您的app.component.ts，使其如下所示:

<menu-component *ngIf="showMenu"></menu-component>
<router-outlet></router-outlet>

重要提示:现在，您必须在 showMenu 中而不是在app.component.ts中设置newsection.component.ts。

您可以通过检查请求的URL来执行此操作。只需将路由器插入app.component.ts中，如下所示:

constructor(router:Router) {
router.events.forEach((event) => {
    if(event instanceof NavigationStart) {
        this.showMenu = event.url !== "/newsection";
    }
  });
}

如果请求带有/newsection的路由，则不应显示菜单。

关于angular - 如何在其他组件中排除app.component.html的代码，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44845770/