从另一个组件点击更新组件

Question

我有共享服务，其中包含类的属性（我想在两个组件之间共享）

@Injectable()
export class DetailsService {
    public detail: Detail;
    constructor() {}
}

在我的组件html中我有这个

<li *ngFor="let dt of data" (click)="DisplayData(dt)">
</li>

和ts文件

public DisplayData(dt: any){
    this.detailsService.detail = dt;
}

好吧我会把它注入我的第二部分

constructor(private detailsService: DetailsService) {}

但是我怎样才能在html中显示数据？我不能在ngOnInit中这样做，因为它没有在页面渲染上加载。如何捕获该点击然后以html显示？

Answer 1

我有一个父子互动的例子，你在这个答案的底部有链接。

您可以将其添加到ngOnInit中。这是共享服务的好处，当您从父级或子级推送/更改新值到服务时，值会相应更新。正如你从我的plunker示例中看到的那样，他们都是父母和孩子放在ngOnInit中，在你的情况下它将是：

ngOnInit() {
  this.dt = this.detailService.detail;
}

您已将此局部变量绑定到服务中的变量，因此当父级或子级中发生更改时，值将更新。所以当你的父母有一个点击事件时，即：

public DisplayData(dt: any){
    this.detailsService.detail = dt;
}

您正在将新数据推送到该服务。子组件然后自动捕获该更改！如果你参考我的例子，你可以看到。

在视图中显示数据的位置添加elvis运算符会很有用。而且我认为这实际上是您在问题中说明的主要问题。什么时候没有数据怎么做？好吧，在视图中使用elvis-operator，你很好：）

在你的情况下，它将是

{{dt?}}

这意味着dt除非有值，否则不会显示！有关elvis-operator here

的更多信息

如果您的共享对象（或其他）中没有初始值，请记住在服务中实例化它，这样您就不会出错！

public detail: Detail = {};

希望这有帮助！ ：）

shared service

的简单示例