角。家长按钮应导航到孩子的模板之一

Question

父组件中有对象数组：

<div *ngFor="let sticker of stickers"
routerLink="sticker-details/{{sticker.id}}">
<h3>{{sticker.title}}</h3>
<p>{{sticker.content}}</p>
</div>

还有按钮：

<button (click)="add(sticker)">
</button>

当我单击此按钮时，它只会创建新的空对象并将其添加到数组中。然后，当我单击此对象时，它会打开一个孩子的组件读取模板，我必须单击编辑按钮才能显示编辑模板。 下面是子组件模板：

<div *ngIf="readTemp">
<button (click)="edit()"></button>
<button (click)="delete()"></button>
...
</div>
<div *ngIf="!readTemp">
<button (click)="cancel()"></button>
<button (click)="save()"></button>
...
</div>

和父级的组件方法：

add(sticker: Sticker): void {
this.stickService.addSticker({sticker} as Sticker)
.subscribe(sticker => {
this.stickers.push(sticker);
}
}

如何制作添加按钮来加载编辑模板并在数组中添加新对象？ 我尝试路由，它不起作用。

Answer 1

从您现有的代码来看，这可能会起作用：

add(sticker: Sticker): void {
this.stickService.addSticker({sticker} as Sticker)
.subscribe(sticker => {
this.stickers.push(sticker);
this.readTemp = sticker;
}
}

我假设您的父级(add()方法所在的位置)具有readTemp属性，该属性随后绑定到子组件的输入。

如果您不需要等待服务确认添加它，您可以在调用stickService之前更早地坚持该this.readTemp = sticker。