[英]Why does adding a selector tag cause a web app to freeze?
I set up a new project with the mean.io generator. 我用mean.io生成器建立了一个新项目。 The TypeScript file for the login component has "app-login" for the selector, but the HTML file for the login component does not include the "app-login" HTML tag anywhere. 登录组件的TypeScript文件的选择器具有“ app-login”,但登录组件的HTML文件在任何地方均不包含“ app-login” HTML标记。
In previous projects, I never failed to put the selector tag in the HTML file, so I put the entire generated contents of the file login.component.html into the "app-login" start and end HTML tags. 在以前的项目中,我从来没有把选择器标签放在HTML文件中,所以我将文件login.component.html的所有生成内容放入“ app-login”开始和结束HTML标签中。
Now the app builds just fine, but it freezes when I try to navigate to the login view. 现在该应用程序构建良好,但是当我尝试导航到登录视图时它冻结。 Can anyone tell me why this is? 谁能告诉我为什么呢?
login.component.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: 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(['']);
})
}
}
On Angular a selector is used to call a component on another component. 在Angular上,选择器用于调用另一个组件上的组件。
Example 例
Home.component.html Home.component.html
<app-login><app-login/>
login.component.html login.component.html
Hello world this is login!
Your result when home component loads will be 加载家庭组件时的结果将是
Hello world this is login
On your approach 在你的方法上
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['../auth.component.scss']
})
login component will load what ever is on your templateUrl, meaning it will load login.component.html. 登录组件将加载templateUrl上的所有内容,这意味着它将加载login.component.html。 Since you added the selector inside you are stuck on an infinite loop where login loads login and so on and on. 由于您在内部添加了选择器,因此陷入了无限循环,在该循环中,登录会加载登录,依此类推等等。
Just remove the selector from your login html and remember, the selector is used to call that component on a different component. 只需从登录html中删除选择器,请记住,选择器用于在其他组件上调用该组件。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.