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

我只为所有组件使用一个模块（Root）。如果我遗漏了任何错误，请帮助解决此问题。

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

当我在Angular 2中使用嵌套组件时，应用程序无法正常工作

1 个答案: