动态更改 Angular “页面”答案

【问题标题】：Change Angular "page" dynamically动态更改 Angular “页面”
【发布时间】：2018-09-01 03:47:16
【问题描述】：

免责声明：我的标题可能不准确，因为我真的不知道该怎么做才能实现我想要的，这就是这个问题的目的;）

我正在构建一个标准的 Angular 5 应用程序。 boostraped 组件是由 CLI 生成的 AppComponent。它的模板包含一个漂亮的抽屉、一个工具栏和路由器插座，用于根据导航更改内容。一切都按预期进行。

问题是我需要 2 个不适合此模板的页面。未登录时使用登录表单和另一个使用创建帐户表单登录时的主页。

我可以在我的模板中使用 ngIf 并在一个中包含 2 个“模板”（一个带抽屉，一个不带），并且基于导航，页面将完全改变其外观。 “较新”的模板将仅包含一个路由器插座，因此我可以拥有完全不同的组件。我不希望有一个带有路由器插座的模板，因为在导航时总是会重新绘制抽屉和工具栏（因为组件正在更改）。

但在我看来，这样做很奇怪...... 我已经在 div 上使用了 ngIf，但用于页面上的“小”东西，而不是整个页面！

还有其他方法吗？

【问题讨论】：

标签： angular

【解决方案1】：

免责声明 :-) 我对 Angular 还是很陌生。所以也许我没有抓住重点。

我不确定，如果我确实了解您在哪里看到问题。假设是这样的：

<app-root>
  <app-nice-toolbar></app-nice-toolbar>
  <app-nice-drawer></app-nice-drawer>
  <app-login *ngIf ...
  <app-register *ngIf ...
  ...

这种方法有什么问题？

【讨论】：

这种方法的缺点是您必须在 AppComponent 中有逻辑才能显示或不显示其他组件。您不仅要依靠路由器来做到这一点，这就是我想要实现的目标......（这就是我在问题中所说的“2 个模板合一”）
好吧，有趣。我认为这正是 Angular 的重点。基于模型/组件状态（更改）的简单视图逻辑（显示、隐藏、动画...）。路由器中任意复杂的客户端应用程序/业务逻辑和普通路由（查看更改、后退按钮等）。甚至无法想象，路由器是实现这种行为的正确位置。