Question

我有一个Augugal 8应用程序。我有一个用于创建新项目的父子路线关系。但是，在加载页面后，您可以在其中创建新项目。首先设置父组件的ID，但是第二次将其传入ngOninit时为null。

这是路由关系：

{
    path: ':dossierId',   

    component: ViewComponent, children: [
    {  path: 'item/new/:dossierItemType', component: ItemComponent}
    ],
    resolve: {
      dossier: DossierResolver,
      dossierItems: DossierItemsResolver
    }

  },

这是ite.component.ts：

export class ItemComponent implements OnInit {
  itemTypes = DossierItemTypeDto;
  formBuilder = new FormBuilder();
  isNew = false;
  editItemForm: FormGroup;
  dossierItemId: string;
  item: DossierItemDto;
  dossierItems: DossierItemDto[];
  dossier: DossierDto;
  globalErrors: ValidationErrors;

  constructor(
    private dossierService: DossierService,
    private route: ActivatedRoute,
    private router: Router,
    private errorProcessor: ErrorProcessor
  ) {
    //this.dossier.id = this.route.snapshot.params.dossierId;
    this.dossier = this.route.snapshot.data.dossier;
    this.dossierItemId = this.route.snapshot.params.dossierItemId;
    this.isNew = this.dossierItemId === undefined;
    this.dossierItems = this.route.snapshot.data.dossierItems;

    if (this.isNew) {
      this.item = {
        title: '',
        itemType: this.route.snapshot.params.dossierItemType,
        date: moment().format('Y-MM-DD'),
        createdAt: moment().format('Y-MM-DD'),
        body: ''
      };
    } else {
      this.item = this.dossierItems.find(i => i.id === this.dossierItemId);
    }
  }

  ngOnInit(): void {
    this.route.params.subscribe((params: Params) => {
     this.dossier.id = params.dossierId;
    });

}

所以当我第一次看这一行时：

我看到了ID：

06637e72-8915-4735-9400-4ef7705194ea

但是当我在谷歌浏览器中调试时，它再次在ngOninit中进入，然后id为null。

这是网址：

http://localhost:4200/en/dossier/06637e72-8915-4735-9400-4ef7705194ea/item/new/Interview

我收到此错误：

core.js:6406 ERROR TypeError: Cannot set property 'id' of undefined
    at SafeSubscriber._next (item.component.ts:58)
    at SafeSubscriber.__tryOrUnsub (Subscriber.js:183)
    at SafeSubscriber.next (Subscriber.js:122)
    at Subscriber._next (Subscriber.js:72)
    at Subscriber.next (Subscriber.js:49)

然后我得到更多错误：

Interview:9 GET https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap net::ERR_NAME_NOT_RESOLVED
Interview:10 GET https://fonts.googleapis.com/icon?family=Material+Icons net::ERR_NAME_NOT_RESOLVED
core.js:6406 ERROR TypeError: Cannot set property 'id' of undefined
    at SafeSubscriber._next (item.component.ts:58)
    at SafeSubscriber.__tryOrUnsub (Subscriber.js:183)
    at SafeSubscriber.next (Subscriber.js:122)
    at Subscriber._next (Subscriber.js:72)
    at Subscriber.next (Subscriber.js:49)
    at BehaviorSubject._subscribe (BehaviorSubject.js:14)
    at BehaviorSubject._trySubscribe (Observable.js:42)
    at BehaviorSubject._trySubscribe (Subject.js:81)
    at BehaviorSubject.subscribe (Observable.js:28)
    at ItemComponent.ngOnInit (item.component.ts:57)

第二次参数是这样的：

this.dossier.id = params.dossierId;

dossierItemType: "Interview"

这是保存方法：

 save(): void {
    const form = this.editItemForm;

    const dossierItemDto: DossierItemPostDto = {
      title: form.controls.title.value,
      itemType: form.controls.itemType.value,
      date: (form.controls.date.value as moment.Moment).format('Y-MM-DD'),
      body: form.controls.body.value
    };

    form.disable();

    if (!this.isNew) {
      this.dossierService.updateDossierItemById(this.dossier.id, this.item.id, dossierItemDto).subscribe(
        item => {
          this.item = item;
          this.sortDossierItems();
          form.enable();
          form.markAsPristine();
          this.errorProcessor.openSuccessSnackBar($localize`Item is saved`);
        },
        error => this.handleError(error)
      );
    } else {
      this.dossierService.newDossierItem(this.dossier.id, dossierItemDto).subscribe(
        item => {
          this.item = item;
          this.dossierItems.unshift(item);
          this.sortDossierItems();
          this.isNew = false;
          form.enable();
          form.markAsPristine();
          this.errorProcessor.openSuccessSnackBar($localize`Item is saved`);
        },
        error => this.handleError(error)
      );
    }
  }

  this.dossierService.newDossierItem(this.dossier.id,

现在也未定义

此错误：

core.js:6406 ERROR Error: Required parameter dossierId was null or undefined when calling newDossierItem.
    at DossierService.newDossierItem (dossier.service.ts:359)
    at ItemComponent.save (item.component.ts:97)

因为一个项目与一个dossierId相关联

Answer 1

这是解决方案：

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    paramsInheritanceStrategy: 'always'
})],
  exports: [RouterModule]
})
export class AppRoutingModule { }

通过获取档案ID两次调用ngOnInit

1 个答案: