Question

我是Angular的一个完整的初学者，并且只编码了大约2年或更短的时间。我正在构建一个待办事项列表应用程序以学习Angular。当前，我正在创建一个表单（登录）并遵循文档。不幸的是，当我使用表单的HTML修改app.component.html时，出现错误RangeError：超出了最大调用堆栈大小。不知道为什么我得到这个错误。我已经搜索了论坛，但我看到的唯一可能就是我有一个无限循环，尽管考虑到我没有在代码中实现任何循环，但我看不出这是怎么可能的。我看到其他人有这个问题，但从未得到回答。任何帮助将不胜感激。

请参阅下面的代码或查看我的GitHub。 https://github.com/bbrawley/TodoListAppAngular/commit/fb06053e889d99be10583d75012031806ede7e04

同一问题从未解决-RangeError: Maximum call stack size exceeded ERROR after I tried to use a selector tag in app component ANGULAR 4 & TypeScript

user.ts

export class User {

    constructor(
        public username: string,
        public password: string
    ) {
        let user = new User('aaa',
            'a');
        console.log('My username is ' + user.username);
    }
}

login-form.component.ts

import { Component, OnInit } from '@angular/core';
import { User } from '../user';

@Component({
  selector: 'app-login-form',
  templateUrl: './login-form.component.html',
  styleUrls: ['./login-form.component.css']
})
export class LoginFormComponent  {

  model = new User('Tester1', '12345');

  submitted = false;

  onSubmit() { this.submitted = true; }

  // TODO: Remove this when we're done
  get diagnostic() { return JSON.stringify(this.model); }

}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { LoginFormComponent } from './login-form/login-form.component';

@NgModule({
  declarations: [
    AppComponent,
    LoginFormComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<app-login-form></app-login-form>

输入上面的行后代码会中断。

Answer 1

问题出在User类中。

export class User {

    constructor(
        public username: string,
        public password: string
    ) {
        //this is where user constructor is getting called
        let user = new User('aaa', 'a');
        console.log('My username is ' + user.username);
    }
}

您基本上是在自己的构造函数中创建User类的新实例。

这会导致以下循环过程：调用User构造函数并创建User实例，最终导致{{1} }错误！

示例代码

ERROR RangeError: Maximum call stack size exceeded [Angular]

Answer 2

听起来可能很愚蠢，但是我不小心将组件包装在了自己的HTML标签中。导致错误的原因。

错误RangeError：超出最大调用堆栈大小[角度]

2 个答案: