Question

我创建了一条路线。当我使用此代码时：{path: ':id' , component: RecipeDetailComponent}

它告诉我这个错误：

错误：组件RecipeDetailComponent不是任何NgModule的一部分，或者该模块尚未导入您的模块。

我在RecipeDetailComponent和app.module中导入AppModuleRouting：

    import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { RecipeComponent } from './recipe/recipe.component';
import { RecipeListComponent } from './Recipe/recipe-list/recipe-list.component';
import { RecipeDetailComponent } from './Recipe/recipe-detail/recipe-detail.component';
import { ShopingListComponent } from './shoping-list/shoping-list.component';
import { ShopingEditComponent } from './shoping-list/shoping-edit/shoping-edit.component';
import { NavbarComponent } from './navbar/navbar.component';
import { DropDownDirective } from './Directive/drop-down.directive';
import { RecipeItemComponent } from './recipe/recipe-list/recipe-item/recipe-item.component';
import {RecipeService} from './recipe/service/recipe.service';
import {ShopingService} from './shoping-list/service/shoping.service';
import {AppModuleRouting} from './routing/app-module-routing';
import { RecipeStartComponent } from './recipe/recipe-start/recipe-start.component';

@NgModule({
  declarations: [
    AppComponent,
    RecipeComponent,
    RecipeListComponent,
    RecipeDetailComponent,
    ShopingListComponent,
    ShopingEditComponent,
    NavbarComponent,
    DropDownDirective,
    RecipeItemComponent,
    RecipeStartComponent
  ],
  imports: [
    BrowserModule,
    AppModuleRouting
  ],
  providers: [RecipeService, ShopingService],
  bootstrap: [AppComponent]
})
export class AppModule { }

import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';

import {RecipeComponent} from '../recipe/recipe.component';
import {ShopingListComponent} from '../shoping-list/shoping-list.component';
import {RecipeStartComponent} from '../recipe/recipe-start/recipe-start.component';
import {RecipeDetailComponent} from '../recipe/recipe-detail/recipe-detail.component';

const appRouts: Routes = [
  { path: '' , redirectTo: '/app-recipe' , pathMatch: 'full' },
  { path: 'app-recipe' , component: RecipeComponent , children: [
    {path: '', component: RecipeStartComponent},
    {path: ':id' , component: RecipeDetailComponent}
  ]},
  { path: 'app-shoping-list' , component: ShopingListComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(appRouts)],
  exports: [RouterModule]
})

export class AppModuleRouting {
}

它在萤火虫中显示了这个警告：

./ SRC /应用/配方/配方细节/食谱-detail.component.css 有多个模块的名称只有外壳不同。在使用其他case-semantic编译文件系统时，这可能会导致意外行为。使用相同的套管。比较这些模块标识符： * E：\ AngularTraning \ RecipeFinal \ node_modules \ exports-loader \ index.js？module.exports.toString（）！E：\ AngularTraning \ RecipeFinal \ node_modules \ css-loader \ index.js？{＆＃34; sourceMap＆＃ 34;：假，＆＃34; importLoaders＆＃34;：1} E：\ AngularTraning \ RecipeFinal \ node_modules \ postcss装载机\ index.js E：\ AngularTraning \ RecipeFinal \ SRC \应用\配方\配方细节！ \偏方detail.component.css 由1个模块使用，i。即 E：\ AngularTraning \ RecipeFinal \ node_modules \ @ngtools \的WebPack的\ src \ index.js E：！\ AngularTraning \ RecipeFinal的\ src \程序\方\配方细节\配方，detail.component.ts * E：\ AngularTraning \ RecipeFinal \ node_modules \ exports-loader \ index.js？module.exports.toString（）！E：\ AngularTraning \ RecipeFinal \ node_modules \ css-loader \ index.js？{＆＃34; sourceMap＆＃ 34;：假，＆＃34; importLoaders＆＃34;：1} E：\ AngularTraning \ RecipeFinal \ node_modules \ postcss装载机\ index.js E：\ AngularTraning \ RecipeFinal \ SRC \应用\配方\配方细节！ \偏方detail.component.css 由1个模块使用，i。即 E：\ AngularTraning \ RecipeFinal \ node_modules \ @ngtools \的WebPack \ SRC \ index.js E：！\ AngularTraning \ RecipeFinal \ SRC \应用\配方\配方细节\配方-detail.component.ts

我该如何解决这个问题？

更新

Detail.ts：

import {ActivatedRoute, Params} from '@angular/router';
import {Component, Input, OnInit} from '@angular/core';

import {RecipeModel} from '../model/recipe-model';
import {RecipeService} from '../service/recipe.service';

@Component({
  selector: 'app-recipe-detail',
  templateUrl: './recipe-detail.component.html',
  styleUrls: ['./recipe-detail.component.css']
})
export class RecipeDetailComponent implements OnInit {

  @Input() recipe: RecipeModel;
  id: number;
  constructor(private recipeService: RecipeService ,
              private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.params.subscribe(
      (params: Params) => {
        this.id = +params['id'];
        this.recipe = this.recipeService.GetRecipe(this.id);
      }
    );
  }

}

组件XComponent不是任何NgModule的一部分，或者模块尚未导入模块

0 个答案: