為什么添加選擇器標簽會導致Web應用程序凍結？

Question

我用mean.io生成器建立了一個新項目。 登錄組件的TypeScript文件的選擇器具有“ app-login”，但登錄組件的HTML文件在任何地方均不包含“ app-login” HTML標記。

在以前的項目中，我從來沒有把選擇器標簽放在HTML文件中，所以我將文件login.component.html的所有生成內容放入“ app-login”開始和結束HTML標簽中。

現在該應用程序構建良好，但是當我嘗試導航到登錄視圖時它凍結。 誰能告訴我為什么呢？

login.component.html：

<app-login>
<mat-card class="example-card">
  <mat-card-header>
    <mat-card-title>Login</mat-card-title>
  </mat-card-header>
  <mat-card-content>
    <form class="example-form">
      <table cellspacing="0">
        <tr>
          <td>
            <mat-form-field>
              <input matInput placeholder="Email" [(ngModel)]="email" name="email" required>
            </mat-form-field>
          </td>
        </tr>
        <tr>
          <td>
            <mat-form-field>
              <input matInput placeholder="Password" [(ngModel)]="password" type="password" name="password" required>
            </mat-form-field>
          </td>
        </tr>
      </table>
    </form>
  </mat-card-content>
  <mat-card-actions>
    <button mat-raised-button (click)="login()" color="primary">Login</button>
    <span>Don't have an account ? <a [routerLink]="['/auth/register']" >register</a> here</span>
  </mat-card-actions>
</mat-card>
</app-login>

login.component.ts：

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

import {AuthService} from '../auth.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['../auth.component.scss']
})
export class LoginComponent implements OnInit {

  constructor(private authService: AuthService, private router: Router) { }

  email: string;
  password: string;

  ngOnInit() {
  }

  login(): void {
    this.authService.login(this.email, this.password)
    .subscribe(data => {
      this.router.navigate(['']);
    })
  }

}

Answer 1

在Angular上，選擇器用於調用另一個組件上的組件。

例

Home.component.html

<app-login><app-login/>

login.component.html

Hello world this is login!

加載家庭組件時的結果將是

Hello world this is login

在你的方法上

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['../auth.component.scss']
})

登錄組件將加載templateUrl上的所有內容，這意味着它將加載login.component.html。 由於您在內部添加了選擇器，因此陷入了無限循環，在該循環中，登錄會加載登錄，依此類推等等。

只需從登錄html中刪除選擇器，請記住，選擇器用於在其他組件上調用該組件。