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

【问题标题】：Preserving Angular component variables while using *ngIf使用 *ngIf 时保留 Angular 组件变量
【发布时间】：2018-07-24 10:56:36
【问题描述】：

下面是我非常精简的代码。

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 中移除时，似乎所有的局部变量也都没有设置。我能做些什么来防止这种情况发生？

【问题讨论】：

您必须将数据存储在其他地方。即使保留它也不可靠，因为用户可以刷新页面并允许它在刷新下表现不同，这在 SPA 设计中是不合适的
请注意，[(ngModel)] 在属性组件上的属性和它从未附加到任何其他内容的 HTML Dom 之间保持状态同步

标签： angular typescript angular2-directives

【解决方案1】：

有很多方法可以做到这一点。您可以将电子邮件存储在您的 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 中提供它以使其成为单例即可。

希望对你有帮助

【讨论】：

【解决方案2】：

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

【讨论】：