angular - 为什么添加选择器标签会导致网络应用程序卡住？

Question

我用 mean.io 生成器建立了一个新项目。登录组件的 TypeScript 文件具有选择器“app-login”，但登录组件的 HTML 文件在任何地方都不包含“app-login”HTML 标记。

在以前的项目中，我从来没有不把selector标签放在HTML文件中，所以我把文件login.component.html生成的全部内容放到“app-login”开始和结束的HTML标签中。

现在应用程序构建得很好，但是当我尝试导航到登录 View 时它卡住了。谁能告诉我这是为什么？

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

登录.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 上，选择器用于调用另一个组件上的一个组件。

例子

主页.component.html

<app-login><app-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']
})

login 组件将加载 templateUrl 上的所有内容，这意味着它将加载 login.component.html。由于您在内部添加了选择器，因此您陷入了无限循环，其中登录加载登录等等。

只需从您的登录 html 中删除选择器并记住，选择器用于在不同的组件上调用该组件。