Question

我有注册＆amp;登录组件，可以通过/＃/ signup和/＃/ login访问。我正在尝试完成类似于Quora的“内容锁定”，其中提示用户登录＆amp;注册

用户进入我的网站，可以“免费”访问多条路线，例如＃/ home，＃/ contactus等。但是，当用户尝试访问＃/ secret时，他们可以“访问”该页面，但除非他们已登录，否则他们将无法与页面进行交互。

登录组件（TS）：

export class LoginComponent implements OnInit, OnDestroy {

  form: FormGroup;
  loading = false;
  failureMessage: string;

  constructor(public appService: AppService,
              public fb: FormBuilder,
              public _authService: AuthService,
              public router: Router) {
    appService.getState().topnavTitle = 'Sign In';
    appService.getState().pageFullscreen = true;

    this.form = this.fb.group({
      email: ['', [Validators.required, Validators.email]],
      password: ['', [Validators.required,
          Validators.minLength(6),
          Validators.maxLength(20)]]
    });
  }


  login(data: Object) {
    this.loading = true;
    this._authService.login(data).subscribe(res => {
      if (res === true) {
        this.router.navigate(['/']);
      } else {
        this.failureMessage = 'Your username or password is incorrect.';
        this.loading = false;
      }
    });
  }

}

登录HTML模板：

<div class="sign-container">
  <div class="sign-background"></div>
  <md-card class="sign-card">
    <md-card-title><img style="height: 64px;" src="assets/img/logo-full.svg"></md-card-title>
    <md-card-subtitle>Sign in to continue.</md-card-subtitle>
    <br>
    <md-card-content>
      <ng-container *ngIf="failureMessage">
        <div class="alert alert-danger" role="alert">
          <strong>Error:</strong>
          {{failureMessage }}
        </div>
      </ng-container>
      <form novalidate [formGroup]="form">
          [form inputs here]
      </form>
    </md-card-content>
    <md-card-actions>
      <button md-raised-button color="primary" (click)="login(form.value)"
      [disabled]="form.status === 'INVALID' || loading ">LOGIN</button>
    </md-card-actions>
    <br>
    <p>Don't have an account? <a routerLink="/signup" routerLinkActive="active">Sign Up</a></p>
  </md-card>

</div>

如何创建一个可以包含登录形式的模态，并允许组件切换为在模态中注册？此外，当登录成功时，模态可以关闭。

Plunkr：https://plnkr.co/edit/KhTilp27hmIDZpawJXM3（正在进行中）

在Angular2中登录/注册Modal

0 个答案: