私は角度4のアプリを構築し、ルーティングを実装しています。私のブラウザは、最初のページの読み込み時にムービーコンポーネントへのコールを頻繁に行うようです。開発者ツールでエラーメッセージが表示されます。最大通話を超えています。問題が何であるか分かりません。ここでは、コードコンポーネントの呼び出しが超過しました
スクリーンショット
ホームモジュール
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HomeComponent } from './home.component';
@NgModule({
imports: [
CommonModule
],
exports: [HomeComponent],
declarations: [HomeComponent]
})
export class HomeModule { }
ホームコンポーネント
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
です
Home.component.html
<p>
home works!
</p>
ムービーモジュール
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {MovieComponent} from './movie.component'
@NgModule({
imports: [
CommonModule
],
exports: [MovieComponent],
declarations: [MovieComponent]
})
export class MovieModule { }
ムービー成分
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-movie',
templateUrl: './movie.component.html',
styleUrls: ['./movie.component.css']
})
export class MovieComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
appmodule
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {FormsModule} from '@angular/forms';
import {HttpModule} from '@angular/http'
import { AppComponent } from './app.component';
import { NavbarComponent } from './navbar/navbar.component';
import { TopbarComponent } from './topbar/topbar.component';
import { FooterbarComponent } from './footerbar/footerbar.component';
import { MRDBGlobalConstants } from './shared/mrdb.global.constants';
import {AppRoutingModule} from './app.routing';
import {HomeModule} from './home/home.module';
import {MovieModule} from './movie/movie.module';
@NgModule({
declarations: [
AppComponent,
FooterbarComponent,
TopbarComponent,
NavbarComponent
],
imports: [
BrowserModule,
HttpModule,
AppRoutingModule,
HomeModule,
MovieModule
],
providers: [MRDBGlobalConstants],
bootstrap: [AppComponent]
})
export class AppModule { }
appcomponent
import { Component ,ViewContainerRef } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
constructor(public viewRef : ViewContainerRef) {
}
}
app.routing
import {NgModule} from '@angular/core';
import {Routes,RouterModule} from '@angular/router';
import {MovieComponent} from '../app/movie/movie.component';
import {HomeComponent} from '../app/home/home.component';
export const appRoutes:Routes = [
{path: '', component: HomeComponent},
{path: 'movie', component : MovieComponent}
];
@NgModule({
imports:[RouterModule.forRoot(appRoutes,{ useHash: true})],
exports:[RouterModule]
})
export class AppRoutingModule {}
app.component.html
<section id="container">
<top-bar>Loading top bar...</top-bar>
<nav-bar>Loading navigation menu...</nav-bar>
<footer-bar>Loading footer...</footer-bar>
<app-movie></app-movie>
<app-home></app-home>
<router-outlet> </router-outlet>
</section>
スクリーンショット2
私はデベロッパーツールでエラーメッセージが表示されるので、デバッグにも役立ちます –
HTMLテンプレートを投稿するのはどうですか? –
私はテンプレートをアップロードしました。私は、私が何をしているかがわかっているかどうかわからない – Tom