Angular2错误内联模板：1：20导致：超出最大调用堆栈大小

首先让我开始说我完全知道有一些类似的post与这个控制台错误相关。

通常我会参考那些，但我一直在从头使用Angular2总共5天，这是我曾经用过的第一个JS框架，所以试图将我的问题与另一个联系起来更加困难。 在撕碎我之前请记住忍耐！

现在解决我的问题，我设法为一个网站拼凑一个非常基本的脚手架，而且我创build了几个组件，我基本上把它们当作网站的每个“页面”（在这种情况下，“home” 'contact'，'navbar'，'footer'）。 我已经开始尝试和实施路由select，以便在URL =“'时将您redirect到家中，或者如果您指定了某个特定项，则会相应地指示您。

我得到的问题是一旦网站加载我得到这个控制台错误：“错误：错误：错误./ HomeClass类HomeComponent – 内联模板：1：20引起：最大调用堆栈大小超过”。

到目前为止，我的search告诉我，我有一个重复函数的地方，我试图消除variables（到目前为止我所有的类都包含几乎0代码），但我仍然得到这个错误。

这是我的app.module.ts

import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; import { AppComponent } from './app.component'; import {HomeComponent} from './home/home.component'; import {ContactComponent} from './contact/contact.component'; // import {ProjectListComponent} from './projectlist/projectlist.component'; // import {ProjectDetailComponent} from './projectdetail/projectdetail.component'; // import {ProjectComponent} from './project/project.component'; import {NavbarComponent} from './navbar/navbar.component'; import {FooterComponent} from './footer/footer.component'; const appRoutes: Routes = [ { path: 'home', component: HomeComponent }, { path: 'contact', component: ContactComponent }, // { path: 'project/:id', component: ProjectDetailComponent }, // { // path: 'projects', // component: ProjectListComponent, // data: { title: 'Projects List' } // }, { path: '', redirectTo: '/home', pathMatch: 'full' }, // { path: '**', component: PageNotFoundComponent } ]; @NgModule({ declarations: [ AppComponent, HomeComponent, ContactComponent, // ProjectListComponent, // ProjectDetailComponent, // ProjectComponent, NavbarComponent, FooterComponent ], imports: [ RouterModule.forRoot(appRoutes), BrowserModule, FormsModule, HttpModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } 

app.component.ts

 import { Component } from '@angular/core'; import {HomeComponent} from './home/home.component'; import {ContactComponent} from './contact/contact.component'; // import {ProjectListComponent} from './projectlist/projectlist.component'; // import {ProjectDetailComponent} from './projectdetail/projectdetail.component'; // import {ProjectComponent} from './project/project.component'; import {NavbarComponent} from './navbar/navbar.component'; import {FooterComponent} from './footer/footer.component'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.less'] }) export class AppComponent { } 

home.component.ts

 import {Component} from '@angular/core'; import {HomeService} from './home.service'; @Component({ selector: 'home', templateUrl: './home.component.html', providers: [HomeService] }) export class HomeComponent { private title; constructor(homeService: HomeService) { this.title = homeService.getContent(); } } 

我不知道你是否需要我的HTML，但这里是app.component.html

 <navigation></navigation> <router-outlet></router-outlet> <footer class="footer"></footer> 

和home.component.html（就像我说这是基本的时刻）

 <home> <h1>{{title}}</h1> </home> 

目前为止，我感到非常困惑，我意识到有很多事情要做，而且我正在尝试关注一些在线课程（从testing版本的变化来看并不容易，大多数课程目前似乎已经很老了）。

无论如何，我真的很感谢你可以给我提供的任何帮助，我非常感谢你花时间来帮助这个nooblessnoobot。

Answer 1

问题是你的home.component.html有一个<home>标签。 这导致它无限地创build新的主页组件，导致您的最大调用堆栈大小超出错误。

Angular正在尝试呈现如下所示的内容：

 <home> <home> <home> ... </home> </home> </home>