为什么添加选择器标签会导致网络应用程序冻结?
Why does adding a selector tag cause a web app to freeze?
我用 mean.io 生成器建立了一个新项目。登录组件的 TypeScript 文件有 "app-login" 作为选择器,但是登录组件的 HTML 文件在任何地方都不包含 "app-login" HTML 标签。
在以前的项目中,我从来没有失败过将selector标签放在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(['']);
})
}
}
在 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 并记住,选择器用于在不同的组件上调用该组件。
我用 mean.io 生成器建立了一个新项目。登录组件的 TypeScript 文件有 "app-login" 作为选择器,但是登录组件的 HTML 文件在任何地方都不包含 "app-login" HTML 标签。
在以前的项目中,我从来没有失败过将selector标签放在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(['']);
})
}
}
在 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 并记住,选择器用于在不同的组件上调用该组件。