Вызов ngOnInit дважды, получив идентификатор досье - PullRequest
Новая
       3

Вызов ngOnInit дважды, получив идентификатор досье

1 голос
/ 14 апреля 2020

У меня есть приложение anuglar 8. И у меня есть родительские дочерние отношения маршрута для создания нового элемента. Но когда страница загружена, где вы можете создать новый элемент. Идентификатор родительского компонента устанавливается первым, но во второй раз, когда он входит в ngOninit, он равен нулю.

Итак, это отношение маршрута: 

{
    path: ':dossierId',   

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

  },

и это итерация .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;
    });

}

Поэтому, когда я впервые смотрю на эту строку:

, я вижу идентификатор: 

06637e72-8915-4735-9400-4ef7705194ea

, но когда я отлаживаю в Google chrome, он снова идет в ngOninit, а затем идентификатор равен нулю.

это URL: 

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

1 Ответ

0 голосов
/ 15 апреля 2020

Итак, вот решение: 

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