为什么添加选择器标签会导致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中删除选择器，请记住，选择器用于在其他组件上调用该组件。