如何在Angular中获取动态创建的对象的id？

Question

编辑了一下问题，以便澄清。

在我的 Angular 8 项目中，我有一个 部件1 包含一个数组，以及一个按钮来创建一个新的对象。然后我有一个 组件2 component2持有一个按钮，它应该将用户重定向到一个叫做 组件3，将创建的组件2对象的id添加到url中，如 localhost/component3/id1 .

在Component 2中，我得到了一个点击输入，通过一个按钮来触发数组的更新，该按钮监听以下方法

public onSelect() {

    const eventObject: EventPing = {
      label:'id',
      object: this.component2Data
    };
    this.ping.emit(eventObject)
  }

component2Data通过 @Input() component2Data:来自组件1，标准值为 id:undefined, position:undefined. 变量 乒 退出组件2，通过 @Output() ping: EventEmitter<any> = new EventEmitter<any>();

在component1的HTML中，数组看起来像这样。

 <app-component2 (ping)="update($event)" [component2Data]="component2new" *ngFor="let component2new of component2spawn"></app-component2>

所以数组会监听一个新的 乒 然后释放一个函数。这个函数在 component1 ts 中是这样的

public update(event: EventPing): void {
if ('id' === event.label) {
      this.router.navigate(['/component3', event.object.id]);
    }
  }

这个函数应该将用户引导到组件3，并附上对象的id。为了实现这个功能，应用路由器被设置为 path: 'workarea/:id',和组件3在构造函数中激活了route。

constructor(private route: ActivatedRoute) {  }

现在，点击时发生的是错误 The requested path contains undefined segment at index 1" 每次我在控制台记录event.object.id的时候，所有对象都得到id undefined。

有趣的是 当我使用 event.object.position，它的工作原理 我被重定向到localhostcomponent31(或者不管它是什么位置)

Answer 1

你可以将对象id作为参数传递给 onSelect 方法，并从模板中获取它，假设你是在数组上循环（如果你发布一些模板代码会很有帮助）。

public onSelect(id: string) {
    this.router.navigate(['component2', id]);
  }

在你的模板文件中（我只是假设你有类似的东西，因为你没有发布太多数据）：

<div *ngFor="let object of myObjects">
  ...
  <button (click)="onSelect(object.id)>Select</button>
</div>

在你的路由配置中

{
 path: 'component2/:id', // ':' tells Angular that is a dynamic parameter
 compomnent: Component2
}