Question

我刚从Angualar开始，遇到了一个我不明白的问题。目前我正在为我的前端实现导航。我有两个组成部分。一个CarList组件，显示一个Cars列表和一个AddCarForm组件，用于将汽车添加到所述列表中。我曾经将表单组件嵌套到列表组件中。为了更好的模块化设计，我想创建一个CarMgmt-Component，它可以添加列表和表单。但是当我将导航从我的列表组件更改为mgmt组件时，我收到以下错误：

ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)
[AddCarFormComponent -> CarlistComponent]: 
StaticInjectorError(Platform: core)
[AddCarFormComponent -> CarlistComponent]: 
NullInjectorError: No provider for CarlistComponent!
Error: StaticInjectorError(AppModule)
[AddCarFormComponent ->  CarlistComponent]: 
StaticInjectorError(Platform: core)
[AddCarFormComponent -> CarlistComponent]: 
NullInjectorError: No provider for CarlistComponent!

以下代码用于工作：

carlist.component.html

... HTML for List
<h2>Auto hinzufügen</h2>
<app-add-car-form></app-add-car-form>
</div>

carlist.component.ts

import { Component, OnInit } from '@angular/core';
import { Car } from '../Car';
import { CarService } from '../Car.service';
import { Observable } from 'rxjs';
import { HttpResponse } from '@angular/common/http/src/response';
import { Guid } from '../Guid';
import { Injectable } from '@angular/core';


@Component({
  selector: 'app-carlist',
   templateUrl: './carlist.component.html',
  styleUrls: ['./carlist.component.css']
})
export class CarlistComponent implements OnInit {
  private result : Observable<Object>;
  private cars : Car[];

  onUpdateClick() {
    this.carservice.getCars().subscribe(result => this.cars = result);
  }

  public updateList(){
    this.onUpdateClick();
  }

  constructor(private carservice : CarService) { } 

  ngOnInit() {
 }

}

附加轿厢form.component.ts

import { Component, OnInit } from '@angular/core';
import { Car } from'../Car';
import { Guid } from '../Guid';
import { Model } from '../Model';
import { CarService } from '../Car.service';
import { ReactiveFormsModule, FormsModule, FormGroup, FormControl, 
Validators, FormBuilder} from '@angular/forms';
import { CarlistComponent } from '../carlist/carlist.component';

@Component({
  selector: 'app-add-car-form',
  templateUrl: './add-car-form.component.html',
  styleUrls: ['./add-car-form.component.css']
})
export class AddCarFormComponent implements OnInit {

  constructor(private carservice : CarService, private carListComp : CarlistComponent ) { }

  ngOnInit() { }  
}

现在我添加了一个名为carmgmt的新组件，其中包含以下html carmgmt.component.html

<app-carlist></app-carlist>
<app-add-car-form></app-add-car-form>

并从

更改了app.module.ts中的路线

{ path: 'cars', component: CarlistComponent }

到

{ path: 'cars', component: CarmgmtComponent }

并删除

<app-add-car-form></app-add-car-form>

来自carlist.component.html

我知道问题是carform组件中注入的carlist组件。但是，当我将表单嵌入列表中而不是在mgmt组件中有两个组件时，为什么它可以工作？

我希望你理解我的问题。对不起，如果我的英语不够好。

感谢您的帮助

Angular 4 StaticInjectorError

0 个答案: