将Angular Value发送到另一个组件

Question

在我的应用程序中，我有一个通过ID路由内容的菜单，但我也有一个详细的视图，其中应显示内容（通过相同的ID）。

我试图通过按钮点击按ID显示对象，我不知道如何将ID值传递给item-detail组件，以便按ID显示内容。 我需要的所有数据都可以在服务中使用。

我已通过ID路由，这很好用

path: ':id',
component: ItemDetailComponent,
data:
{
    title: 'Item Detail',
}

item.component.html （菜单组件）

我在这里触发一个事件

<ng-container *ngFor="let item of items">
    <button (click)="getId(item.id);"></button>

item.component.ts （菜单组件）

这里我得到了对象的id

getId(datavalue: number) 
{
      console.log(datavalue); 
}

当我点击按钮时，我在控制台日志中获得了正确的ID。

现在我想通过ID在详细视图中显示内容，但我不确定如何将ID传递给此组件。

项-detail.component.html 也许是这样的？

<div>
    <h2>Text Content</h2>
    <p>
        {{glossar[datavalue]?.textContent}}
    </p>
</div>

任何帮助表示赞赏！

Answer 1

如果我理解你，那么你应该将ID作为@Input（）参数传递给item-detail组件，如下所示：

 @Input()
 id: number;

HTML：

<item-detail-component [id]="item.id"></item-detail-component>

然后在item-detail-component内部通过该id加载数据以获取详细信息。

Answer 2

由于您使用路由模块，因此您应该使用路由。

<button [routerLink]="[item.id]" (click)="getId(item.id);"></button>

如果您使用路由器插座和正确的路由正确设置了路由，这应该可行。

在您的组件中，使用激活的路线获取您的ID

constructor(private route: ActivatedRoute) { this.id = route.snapshot.params.id; }