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

Question

在下面显示的示例中，当我单击 Log in 时，我的整个 login component 正在加载。然而，当我点击 I don't have an account 时，我得到了类似这样的东西 But I would like to have this: 有什么想法可以实现吗？

我的源代码：

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 将使 url 保持不变

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.

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

How can I load whole component in Angular?

html

typescript

angular-ui-router

angular