Question

首先让我首先说我完全清楚有一些与此控制台错误相关的类似帖子。

通常情况下我会参考那些但我从头开始使用Angular2总共5天，这是我用过的第一个JS框架，所以试图将我的问题与另一个问题联系起来证明更难。在撕毁我之前，请记住并记住！

现在继续讨论我的问题，我已经设法为一个网站拼凑了一个非常基本的脚手架，并且我已经创建了几个组件，我基本上将其视为每个＆＃34;页面＆＃34;该网站（在这种情况下，＆＃39; home＆＃39;，＆＃39; contact＆＃39;，＆＃39; navbar＆＃39;，＆＃39; footer＆＃39;）。我已经开始尝试实施路由，以便在URL =＆＃39;＆＃39;你被重定向回家，或者如果你把它放在一个特定的位置，它会相应地指示你。

我得到的问题是，一旦网站加载，我就会收到此控制台错误：＆＃34;错误：./ HomeComponent类错误HomeComponent - 内联模板：1：20导致：最大调用堆栈超过＆＃34;。

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

这是我的app.module.ts

＆＃13;

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 { }

＆＃13;

app.component.ts

＆＃13;

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 {

}

＆＃13;

home.component.ts

＆＃13;

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

＆＃13;

我不确定您是否需要我的HTML，但这里是app.component.html

＆＃13;

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

＆＃13;

和home.component.html（就像我之前说的那样基本）

＆＃13;

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

＆＃13;

到目前为止，我感到非常困惑，我发现有很多东西需要接受，而且我正在尝试关注几个在线课程（由于测试的变化，它并不容易，目前大多数课程都很老了。）

无论如何，我真的非常感谢你能给我提供任何帮助，我非常感谢你花时间帮助这个菜鸟少一点菜鸟。

Answer 1

问题是您的home.component.html标记了<home>个标记。这导致它无限地创建新的主组件，导致最大调用堆栈大小超过错误。

Angular正在尝试渲染类似：

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

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

1 个答案: