角度2のネストされたコンポーネントを使用すると、アプリケーションが動作しない

Question

私のアプリケーションで星ランク付けのネストされたコンポーネントを使用していますが、追加するとアプリケーションでは機能しません。私は私のテンプレートで私の新しいコンポーネントのセレクタを使用し、app.module宣言でコンポーネントとして宣言しました。

star.component.html

<div class="crop" 
[style.width.px]="starWidth" 
[title]="rating"> 
<div style="width: 86px"> 
    <span class="glyphicon glyphicon-star"></span> 
    <span class="glyphicon glyphicon-star"></span> 
    <span class="glyphicon glyphicon-star"></span> 
    <span class="glyphicon glyphicon-star"></span> 
    <span class="glyphicon glyphicon-star"></span> 
</div> 
</div> 

star.component.ts

import { Component, OnChanges } from '@angular/core'; 

@Component({ 
selector: 'ai-star', 
templateUrl: 'app/shared/star.component.html', 
styleUrls: ['app/shared/star.component.css'] 
}) 

export class StarComponent implements OnChanges { 
rating: number=4; 
starWidth: number; 

ngOnChanges(): void { 
    this.starWidth = this.rating * 86/5;        
} 

} 

app.module.ts私はすべてのために一つだけのモジュール（ルート）を使用

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { FormsModule } from '@angular/forms'; 
import { ProductListComponent } from './products/product-list.Component'; 

import { ProductFilterPipe } from './products/product-filter.pipe'; 
import { StarComponent } from './shared/star.component'; 

import { AppComponent } from './app.component'; 

@NgModule({ 
imports: [ BrowserModule,FormsModule ], 
declarations: [ AppComponent,ProductListComponent,ProductFilterPipe,StarComponent], 
bootstrap: [ AppComponent ] 
}) 
export class AppModule { } 

私のコンポーネント。私が何かを見逃しているなら、これを解決するのを手伝ってください。

Answer 1

ルーティングファイルを@NgModule にインポートしていない場合、ルーティングファイルは次のようになります。

import { 
    Route 
} from '@angular/router'; 
import { Meteor } from 'meteor/meteor'; 
import { 
    CsvTimelineComponent 
} from './modules/core/csvtimeline/csvtimeline.component'; 
import { 
    CsvJsonComponent 
} from './modules/core/csvjsonparse/csvjson.component'; 
import { 
    CsvAddCategoryComponent 
} from './modules/core/addcategory/addcategory.component'; 
import { 
    LoginComponent 
} from './modules/loginComponent/login.component'; 
import { 
    TemplateComponent 
} from './modules/core/template.component'; 
import { 
    DashboardComponent 
} from './modules/core/dashboard/dashboard'; 

export const routes: Route[] = [{ 
    path: '', 
    redirectTo: "login", 
    pathMatch: "full" 
}, 
{ 
    path: 'login', 
    component: LoginComponent 
}, 
{ 
    path: 'csvtemplate', 
    component: TemplateComponent, 
    canActivate: ['canActivateForLoggedIn'], 
    children: [{ 
     path: '', 
     redirectTo: 'dashboard' 
    }, 
    { 
     path:'dashboard', 
     component: DashboardComponent 
    }, 
    { 
     path: 'csvtimeline/:month/:year', 
     component: CsvTimelineComponent, 
     canActivate: ['canActivateForLoggedIn'], 
    }, { 
     path: 'csvjson', 
     component: CsvJsonComponent 
    }, { 
     path: 'addcategory', 
     component: CsvAddCategoryComponent 
    } 
    ] 
}]; 

とあなたのmodule.ts内のファイルは、この

import { 
    NgModule 
} from '@angular/core'; 
import { 
    BrowserModule 
} from '@angular/platform-browser'; 
import { 
    FormsModule, 
    ReactiveFormsModule 
} from '@angular/forms'; 
import { 
    RouterModule 
} from '@angular/router'; 
import { 
    AppComponent 
} from './app.component'; 
import { 
    routes 
} from './app.routes'; 

@NgModule({ 
    imports: [ 
     BrowserModule, 
     FormsModule, 
     ReactiveFormsModule, 
     RouterModule.forRoot(routes),<-- you are missing this 
    ], 
    declarations: [ 
     AppComponent 
    ], 
    providers: [ ], 
    bootstrap: [ 
     AppComponent 
    ] 
}) 
export class AppModule {}