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

Question

在下面显示的示例中，当我单击“ Log in整个login component正在加载。 但是，当我单击I don't have an account时，我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

 <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.