Question

我正在构建一个Angular2 + App。 1周后开始学习角度。

以下是结构 -index.html - AppComponent（app-root） - 标题组件（标题） - 注册组件（注册）

SignupComponent是一个模态。

成功登录后，我想用用户组件替换我的注册帐户（应该是带有多个链接的下拉菜单 - （帐户链接，登出链接））。

我认为解决方案是成功登录后，我应该从注册组件向Header组件发出事件。

收到事件后，Header组件应切换到UserComponent并隐藏注册组件Div。

用户组件应具有Auth Gaurd，因为下拉列表中的链接应受到保护。

我的问题很少

如何从Signup Modal路由到index.html并需要进行更改？ - 我是否需要刷新index.html加载帐户组件的位置？我应该如何路由到index.html，而index.html应该有新的User组件来代替注册组件。
这是一种正确的方法吗？如果没有，在角度2 +中执行此操作的理想方法是什么？

Answer 1

我正在为角4.3写这些技巧。首先，我建议不要将你的html放入index.html文件，这不是一个正确的方法。 APP组件是您可以将所有html放在那里的主要组件。现在除了标题（登录/注销链接应该在这里）和页脚删除其他html并使用 router-outlet 来构建单页应用程序。

我想你已经有了login / SignIn组件和login / SignIn服务。首先在登录服务中设置一个变量，并在构造函数中将其标记为false。现在，您需要在登录和注销操作中更改此变量的值。

之后需要将登录服务调用到app组件并在构造函数中初始化。

最后在app组件html中你有登录/注销链接，使用 ngIf 来显示/隐藏带有登录服务变量的链接。

我的代码如下所示。

登录服务

export class LoginService{
    isloggedin : boolean;
    constructor(private _http: Http){
        this.isloggedin = false;
    }

应用组件HTML

<li *ngIf="!loginService.isloggedin"> <a routerLink="login">Login</a> </li>
<li *ngIf="!loginService.isloggedin"> <a routerLink="register">Register</a> </li>
<li *ngIf="loginService.isloggedin"> <a routerLink="logout">Logout</a> </li>

应用组件

import { LoginService } from './login.service';

export class AppComponent {
constructor(private loginService: LoginService){
}

注销后我只需清除localstorage并将isloggedin设置为false;

Answer 2

查看Angular路线：https://angular.io/docs/ts/latest/tutorial/toh-pt5.html

和ngIF指令：https://angular.io/docs/ts/latest/guide/structural-directives.html#!#ngIf

您可以创建一些布尔值，负责保存有关显示内容的信息，例如isClientLogged = true / false。然后使用ngIf语句显示您想要的内容。如果您想将页面的某些部分重定向到另一部分，请使用Angular路线。

Angular 2+ - 成功登录后，将Header中的Login组件更改为User Account Component

2 个答案: