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

发布时间：2020-12-17 17:03:13 所属栏目：安全来源：网络整理

导读：app.component.html是我们的默认组件,其中添加了一个菜单,但我不希望将其包含在我的其他组件中. 我该怎么做？问题是当我加载newsection.component.html时,它会在顶部显示app.component.html,如下所示 Please guide how can i restrict it so that it doesn

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

我该怎么做？

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

enter image description here

Please guide how can i restrict it so that it doesnt load above editsection.component.html

解决方法

你可以结合Dhyey和Hamed Baatour的回答.

首先,为菜单创建一个单独的组件(例如menu.component.ts)并将所有代码放在那里.

然后修改你的app.component.ts,使它看起来像这样：

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

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

您可以通过检查请求的URL来执行此操作.只需在您的app.component.ts中注入路由器,如下所示：

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

如果请求带有/ newsection的路由,则不应显示该菜单.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!