Angular 2 Routes显示没有组件的确认屏幕？答案

【问题标题】：Angular 2 Routes to show confirmation screen without compoent?Angular 2 Routes显示没有组件的确认屏幕？
【发布时间】：2017-06-06 09:48:22
【问题描述】：

我的项目中有 UX 设计，比如假设我有一个注册页面，所以我用它的 html 和 css 制作了一个注册组件，并给出了一个状态 'localhost:8080/register' 即 '/register' 作为路由. 成功注册后，我想显示一个不同的 HTML 模板，用于将某些路由统计信息注册为“/register/done”，但在这里我不想制作任何新组件，因此是否可以创建没有组件的路由。第二种方法是我可以替换当前组件中的 HTML 模板以显示成功注册确认屏幕。那么是否可以动态更改 HTML 模板。由于我使用的是 webpack，我认为这是不可能的。

如果有其他解决方案可以用不同的 HTML 模板和路由显示这两个相关的路由，那么请在这里分享。

提前致谢！！

【问题讨论】：

我很正常的做法是在需要身份验证的路由上设置route guard。如果您未登录，您将被重定向到/login - 您已登录，您将转到该路由真实组件。然后，如果用户在已经登录时主动导航到/login - 只需显示“您已经登录......某事某事”
@FredrikLundin 我认为您没有遇到我的问题。请重新解释问题，这里没有守卫的角色，也没有我讨论过的登录相关的事情。
你说得对，我读得太快了——抱歉！对于您的问题，我真的没有很好的解决方案，但也许这个帖子可以提供帮助：stackoverflow.com/questions/40786490/…
当然你可以简单地在你的模板中做一个*ngIf='registered' else...来显示不同的html。但是如果有很多 html，我知道你可能想把它分解

标签： angular angular2-routing angular2-template

【解决方案1】：

使用标志来动态更改 html 模板。根据您的要求在您的 register.component.ts 中设置标志 true 或 false。在 html 模板中使用 'ngIf' 在模板视图之间切换。

<div *ngIf="flag">
   Main Template
</div>

<div *ngIf="!flag">
   Successfull registration template
</div>

【讨论】：

谢谢，这已经出现在我的脑海中。您还有其他选择吗？

【解决方案2】：

I have solved it like you say but with optimized ngIf else in Angular 4. like following-


<div class="parent-div">
  <div class="signup-center " *ngIf="!signUpDone; else confirm">
      <div>Signup with emailid>
          ....Signup screen.....
      </div>
  </div>
  <ng-template #confirm>
     <div>Congratulations!! You have successfully created your account</div>
  </ng-template>
</div>

【讨论】：