Question

在下面显示的示例中，当我点击Log in时，我的整个login component正在加载。但是，当我点击I don't have an account时，我会得到类似的内容但我希望这样：任何想法我怎样才能做到这一点？

我的源代码：

login.component.html：

<div class="col-md-6 col-md-offset-3">
        <form *ngIf="!authenticated" name="form" (ngSubmit)="f.form.valid && login()" #f="ngForm" novalidate>
            <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !username.valid }">
                <label for="username">Username</label>
                <input type="text" class="form-control" name="username" [(ngModel)]="model.username" #username="ngModel" required />
                <div *ngIf="f.submitted && !username.valid" class="help-block">Username is required</div>
            </div>
            <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !password.valid }">
                <label for="password">Password</label>
                <input type="password" class="form-control" name="password" [(ngModel)]="model.password" #password="ngModel" required />
                <div *ngIf="f.submitted && !password.valid" class="help-block">Password is required</div>
            </div>
            <div class="form-group">
                <button [disabled]="loading" class="btn btn-primary" >Log in</button>


                <img *ngIf="loading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAML" /></div>
                <div><a (click)="showSignUp = true" class="btn btn-link">I don't have an account</a>
            </div>
        </form>

        <app-registration *ngIf="showSignUp"></app-registration>

            <home *ngIf="authenticated"></home>

    </div>

login.component.ts：

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';

import { AlertService, AuthenticationService } from '../services/index';

@Component({
    moduleId: module.id,
    templateUrl: 'login.component.html'
})

export class LoginComponent implements OnInit {
    model: any = {};
    loading = false;
    authenticated: boolean = false;
    showSignUp: boolean = false;

    constructor(
        private route: ActivatedRoute,
        private router: Router,
        private authenticationService: AuthenticationService,
        private alertService: AlertService) { }

    ngOnInit() {
        // reset login status
        this.authenticationService.logout();

    }

    login() {
        this.loading = true;
        this.authenticationService.login(this.model.username, this.model.password)
            .subscribe(
                data => {
                    this.authenticated = true;
                },
                error => {
                    this.authenticated = false;
                    this.alertService.error(error);
                    this.loading = false;
                });

    }
}

解我用下面显示的方式解决了我的问题。它是正确完成还是不可接受，应该以另一种方式完成？

<div class="col-md-6 col-md-offset-3">
    <form *ngIf="!authenticated" name="form" (ngSubmit)="f.form.valid && login()" #f="ngForm" novalidate>
        <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !username.valid }">
            <label for="username">Username</label>
            <input type="text" class="form-control" name="username" [(ngModel)]="model.username" #username="ngModel" required />
            <div *ngIf="f.submitted && !username.valid" class="help-block">Username is required</div>
        </div>
        <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !password.valid }">
            <label for="password">Password</label>
            <input type="password" class="form-control" name="password" [(ngModel)]="model.password" #password="ngModel" required />
            <div *ngIf="f.submitted && !password.valid" class="help-block">Password is required</div>
        </div>
        <div class="form-group">
            <button [disabled]="loading" class="btn btn-primary" >Log in</button>


            <img *ngIf="loading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///B1YhiCnlsRkAAAOwAAAAAAAAAAAA==" /></div>

        <div><a [routerLink]="['/registration']" skipLocationChange class="btn btn-link">I don't have an account.
</a>
        </div>

    </form>

    <home *ngIf="authenticated"></home>
    <app-registration *ngIf="showSignUp"></app-registration>

</div>

Answer 1

而不是包括

 <app-registration *ngIf="showSignUp"></app-registration>

在login.html中

进行计票，例如：

   <div><a [routerLink]="['/register']" skipLocationChange  class="btn btn-link">I don't have an account</a>

添加skipLocationChange会使网址保持不变

Answer 2

您需要使用不同的标志来管理登录表单，或者您需要设置authenticated = false，您可以在其中设置showSignUp = true。最好使用ng-if。

为每个功能创建单独的组件

Answer 3

＆＃13;

<login>login form</login>
<dashboard>Once user login</dashboard>
<registration>to display registration works message<registration>
So when you click "I don't have an account" open registration component using routes. Its the right approach when you use angular 2.

＆＃13;

如何在Angular中加载整个组件？

3 个答案: