我正在做一个Angular项目，并在这个bug上呆了很长时间。在网上找不到任何东西，我自己也找不到解决方案。
描述：
我有一个HTML文档，两者都有不同的UI，一个是提要，一个则是登录/注册。我已经在我的app.component.html中安排了这个模板。在下面附上代码
<app-pageloader></app-pageloader>
<app-header></app-header>
<app-login *ngIf = "router.url == '/login'"></app-login>
<!-- <router-outlet></router-outlet> -->
<div *ngIf="router.url != '/login'" class="view-wrapper">
<!-- Container -->
<div id="main-feed" class="container">
<!-- Content placeholders at page load -->
<!-- this holds the animated content placeholders that show up before content -->
<!-- Feed page main wrapper -->
<div id="activity-feed" class="view-wrap true-dom">
<div class="columns">
<!-- Left side column -->
<div class="column is-3 is-hidden-mobile">
<app-left-sidebar *ngIf="router.url != '/login'"></app-left-sidebar>
</div>
<!-- /Left side column -->
<!-- Middle column -->
<div class="column is-6">
<app-postarea></app-postarea>
<router-outlet></router-outlet>
<app-loadmore></app-loadmore>
</div>
<!-- /Middle column -->
<!-- Right side column -->
<div class="column is-3">
<app-right-sidebar></app-right-sidebar>
</div>
</div>
</div>
</div>
<app-modals></app-modals>
</div>
现在，您可以看到我的提要模板从Container和Pageloader开始，应用程序头在这两个接口中都是通用的。在我的提要模板中，有多个组件只需要加载一次，即当我们刷新时。它们是左侧边栏、张贴区和右侧边栏，不同的页面，如提要和主页，都是在路由器出口的帮助下路由的。
在登录页面中，不需要我上面提到的这些东西。
现在，当我切换到/login时，我想要它。当我切换到/feed时，它应该只加载登录组件，不应该加载其他组件。所有组件应装载在容器下方。
到目前为止，我已经使用了URL方法，并将使用accessToken本地存储条件来隐藏和显示组件。
这个解决方案正在工作——它只是在主页面上隐藏组件，但它也在后台加载它们，进行未经授权的API调用。
所以现在我想，如果我切换到/login，只加载登录部分，如果我转换到feed、home或博客，那么除了路由器插座之外，所有组件都应该加载，比如边栏和postarea。所以它只在调用组件时进行调用。
如果你曾经遇到过这个问题并解决了这个问题。也帮帮我。非常感谢。
假设只有登录的用户才能看到任何东西，那么您可能应该将*ngIf的目标设置为仅与经过身份验证的用户一起显示，例如：
*ngIf="isAuthenticated()"或*ngIf="user && user.id"
或者类似的东西。事实上，最好使用Route Guard立即将任何未经身份验证的用户重新路由到您的登录。
除此之外，您的组件甚至在router.url成为一个东西之前就被激活了。你可以试试：
*ngIf="router.url && router.url!= "" && router.url != '/login'"