如何在 angular 8 中使用子路由获取 id

Question

我有一个 angular 8 应用程序。

我尝试用路由制作一个新项目。 创建项目的链接是子路由。 我尝试获取项目的 ID。 但是每次id都是null。

我有这个作为路由：

{
    path: ':dossierId',
    component: ViewComponent,
    resolve: {
      dossier: DossierResolver,
      dossierItems: DossierItemsResolver
    },
    children: [  

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

这是组件：

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.route.params.subscribe((params: Params) => {
      this.dossier.id = params.id;
    });

    //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.editItemForm = this.formBuilder.group({
      title: this.formBuilder.control(this.item.title, [Validators.required]),
      itemType: this.formBuilder.control(this.item.itemType, [Validators.required]),
      date: this.formBuilder.control(moment(this.item.date, 'Y-MM-DD'), [Validators.required]),
      body: this.formBuilder.control(this.item.body, [Validators.required, Validators.maxLength(2097152)])
    });
  }
}

但每次这样：

  this.dossier.id = params.id;

给出null

那么我必须改变什么？

谢谢

如果我这样做：

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

加载组件时我已经收到错误：

core.js:6406 ERROR TypeError: Cannot read property 'params' of null
    at new ItemComponent (item.component.ts:36)
    at NodeInjectorFactory.ItemComponent_Factory [as factory] (item.component.ts:140)
    at getNodeInjectable (core.js:6176)
    at instantiateAllDirectives (core.js:14734)
    at createDirectivesInstances (core.js:14040)
    at ɵɵelementStart (core.js:23537)
    at Module.ɵɵelement (core.js:23597)
    at ViewComponent_div_1_Template (view.component.html:8)
    at executeTemplate (core.js:13997)
    at renderView (core.js:13797)

如果我这样做：

 {
    path: ':dossierId',
    component: ViewComponent,
    resolve: {
      dossier: DossierResolver,
      dossierItems: DossierItemsResolver
    }
  },

  {
    path: ':dossierId/item/new/:dossierItemType',
    component: ItemComponent,
    resolve: {
      dossier: DossierResolver,
      dossierItems: DossierItemsResolver
    }
  },

然后它工作。

但我不想那样，因为我想在同一个视图中加载新项目，而不是在单独的视图中

Thank you I try that: core.js:6406 ERROR TypeError: Cannot set property 'id' of undefined
    at SafeSubscriber._next (item.component.ts:37)
    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 new ItemComponent (item.component.ts:36)

Answer 1

在路由后添加firstChild ：

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

Answer 2

如果您想获取dossierId ，您可以在获取 id 时简单地获取它。 因为id在您的路由配置中不存在，所以您无法获取它。 以这种方式获取dossierId ：-

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

您应该在ngOnInit()方法中执行此操作。

Answer 3

我有同样的问题，但实际上这是玩路由的问题，父路由没有给它一个组件，然后用空路径创建另一个孩子，在这里添加组件，rest 仍然存在，保留它从这种方式：

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