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

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

Answer 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中提供它，使其成为单身人士。

希望这有帮助

Answer 2

您可以让login组件拥有@Output和@Input以及implement onDestroy。您的@Output将EventEmitter将数据发送回app.component，您的@Input值将作为参数收到电子邮件，最后在ngOnDestroy内emit email {1}} app.component到app.component的值在组件销毁之前，变量将在login内更新，这意味着下次@Input呈现时，它将会感谢login.component上{{1}}接受电子邮件作为参数

的最新价值

使用* ngIf

2 个答案: