使用 *ngIf 时保留角度分量变量

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>绑定到使用emailngModel我认为它会被保留。

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

Answer 1

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

希望这有帮助

Answer 2

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