将角度值发送到另一个组件答案

【问题标题】：Send Angular Value to another component将角度值发送到另一个组件
【发布时间】：2018-03-14 09:37:14
【问题描述】：

在我的应用程序中，我有一个通过 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 传递给此组件。

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

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

任何帮助表示赞赏！

【问题讨论】：

有一些方法可以实现这一点，例如：1.) 使用 @output 和事件发射器 2.) 使用 subject/behaviorSubject 通过 rxjs 发送。

【解决方案1】：

既然你使用路由模块，那么你应该使用路由。

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

如果您使用路由器插座正确设置了路由，并且路由正确，这应该可以工作。

在你的组件中，使用激活的路由来获取你的ID

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

【讨论】：

【解决方案2】：

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

 @Input()
 id: number;

HTML：

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

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

【讨论】：