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

Question

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

我该怎么做？

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

  

请指导我如何限制它，以便它不会加载到editsection.component.html

之上

Answer 1

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

首先，为您的菜单创建一个单独的组件（例如app.component.ts）并将所有代码放在那里。

然后修改您的<menu-component *ngIf="showMenu"></menu-component> <router-outlet></router-outlet> ，使其如下所示：

showMenu

重要提示：现在，您必须在{{1>}中设置{{1>} ， <{1}} }}

您可以通过检查请求的网址来执行此操作。只需在app.component.ts中注入路由器，就像这样：

newsection.component.ts

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

Answer 2

Assalamualaikum，

首先，您应该了解角度的​​本质，因为它是单页面应用程序，这意味着加载了单个HTML页面，您可以使用路由器为其注入其他代码。但是，作为一种解决方法，您可以使用*ngIf指令来显示和隐藏您的应用组件，具体取决于用户在应用中导航的位置，如下所示：

if (this.router.url === '/login') {
this.showComponent = false
}

并在模板中执行以下操作：

<app-root *ngIf="showComponent" ><app-root>
<router-outlet></router-outlet>

我希望这可以帮助你：）

修改

app-root是您创建的新组件的选择器，用于将应用组件HTML和逻辑移动到其中。在app.component.html模板中，只需添加我在app.component.ts中提供的HTML注入路由器并创建名为showComponent的变量，然后在ngOnInit或构造函数中添加if上面的语句显示或隐藏app-root组件，具体取决于提供的路由器条件。

Answer 3

如果您只想在少数组件中显示菜单，请为菜单创建一个新组件，从app.component.html中删除html for menu，并在您想要的文件中包含新构建的menu组件下面：

<div id="some-other-component">
    <menu-comp></menu-comp>
    // other html below
</div>

Answer 4

我使用的一个小例子。变量＆＃39;标题＆＃39;接收组件位置/路径。然后在组件I中检查：

在 app.component.ts

中

isMaps(path) {
    var title = this.location.prepareExternalUrl(this.location.path());
    title = title.slice(1);
    if (path == title) {
        return false;
    }
    else {
        return true;
    }
}

app.component.html

中的

   <router-outlet></router-outlet>
    <div *ngIf="isMaps('maps')">
        <app-footer></app-footer>
    </div>

如果主要名称/路径为地图，则方法将返回＆＃39; false ＆＃39;然后不要在 map.component.ts

中显示出来