使用 *ngIf 时保留 Angular 个组件变量

Question

下面是我精简的代码。

app.component.html

<app-nav></app-nav>
<app-login *ngIf="!loggedIn"></app-login>

app.component.ts

  loggedIn: boolean;
  ...
  //Shared service login logic - this stuff works
  loggedIn = true;
  loggedIn = false;

login.component.ts

  email: string;
  pass: string;

  Login(){
    //Shared service login logic - passes in this.email and this.pass
    //unset password but keep email
  }

login.component.html

<input type="email" required [(ngModel)]="email" />
<input type="password" required [(ngModel)]="pass" />
<button type="submit"  (click)="Login()">Sign In</button>

我的代码运行良好，而且大部分都符合预期。当用户未登录时，<app-login> 组件不可见，反之亦然。但是，我打算只在 login.component.ts 中取消设置密码，因为电子邮件 <input> 使用 ngModel 绑定到 email 我认为它会被保留。

然而，当模型被解构并从 DOM 中删除时，似乎所有局部变量也都未设置。我能做些什么来防止这种情况？

Answer 1

您可以让 login 组件具有 @Output 和 @Input 以及 implement onDestroy。您的 @Output 将是 EventEmitter，它将数据发送回您的 app.component，您的 @Input 值将作为参数接收电子邮件，最后在 ngOnDestroy 中，您可以 emit 在组件被销毁之前 email 的值变为 app.component ，变量将在 app.component 内部更新，这意味着下一次 login 渲染时，它将由于 login.component 上的 @Input 接受电子邮件作为参数

，因此具有最新值

Answer 2

有很多方法可以做到这一点。您可以将电子邮件存储在 app.component 中，使用本地存储或共享服务。

从父组件（你的app.component）获取数据

app.component.html

    <app-nav></app-nav>
    <app-login [email]="email" *ngIf="!loggedIn"></app-login>

app.component.ts

  loggedIn: boolean;
  ...
  //Shared service login logic - this stuff works
  loggedIn = true;
  loggedIn = false;
  //new variable
  email = ""

并在您的 login.component 中，将 @Input 添加到您的代码中以从 app.component.

获取电子邮件

@Input email;

本地存储

无论何时登录，都像这样将电子邮件保存在本地存储中

 Login(){
      localStorage.setItem('email', email);
      // your login code
  }

并稍后在您再次创建 login.component 时通过构造函数检索它。

constructor(){
   this.email = localStorage.getItem('email');
}

共享服务

使用本地存储时的实现几乎相同，您需要在登录时设置电子邮件，并在再次创建登录组件时重新检索。只需确保在 app.module 中提供它以使其成为单例。

希望对您有所帮助

使用 *ngIf 时保留 Angular 个组件变量

Preserving Angular component variables while using *ngIf

typescript

angular2-directives

angular