Почему добавление тега селектора приводит к зависанию веб-приложения? - PullRequest
Новая
       10

Почему добавление тега селектора приводит к зависанию веб-приложения?

2 голосов
/ 02 апреля 2019

Я создал новый проект с генератором mean.io.Файл TypeScript для компонента входа в систему имеет «app-login» для селектора, но файл HTML для компонента входа в систему нигде не содержит HTML-тега «app-login».

В предыдущих проектах я никогдане удалось поместить тег селектора в HTML-файл, поэтому я поместил все сгенерированное содержимое файла login.component.html в начальный и конечный HTML-теги app-login.

Теперь приложение создается толькохорошо, но он зависает, когда я пытаюсь перейти к представлению входа в систему.Может кто-нибудь сказать мне, почему это?

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(['']);
    })
  }

}

1 Ответ

0 голосов
/ 02 апреля 2019

On 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 логина и запомните, селектор используется для вызова этого компонента вдругой компонент.

...