Javascript 在手动刷新组件之前，从弹出窗口添加的数据不可见_Javascript_Html_Angular_Typescript

Javascript 在手动刷新组件之前，从弹出窗口添加的数据不可见

javascript html angular typescript

Javascript 在手动刷新组件之前，从弹出窗口添加的数据不可见,javascript,html,angular,typescript,Javascript,Html,Angular,Typescript,在向弹出窗口中添加一些注释时，新添加的注释应作为指示器显示在调用弹出窗口的屏幕上，但在我的情况下，在向弹出窗口添加注释数据后，如果没有刷新父页面，我必须手动刷新页面这是我的HTML： <div class="mismatchbox" *ngFor="let data of investigateData" > <a href="javascript:void(0);" class="chat_btn fancybox-effects-d" (click)="showCom

在向弹出窗口中添加一些注释时，新添加的注释应作为指示器显示在调用弹出窗口的屏幕上，但在我的情况下，在向弹出窗口添加注释数据后，如果没有刷新父页面，我必须手动刷新页面

这是我的HTML：

<div class="mismatchbox" *ngFor="let data of investigateData" >
  <a href="javascript:void(0);" class="chat_btn fancybox-effects-d" (click)="showCommentDialog(data)">
  <span class="countIndicator" *ngIf="data?.commentsCount !== 0"></span>
</div>

获取注释计数方法

我猜你操作顺序不对。单击组件时，将执行此方法。将该值设置为会话存储，然后调用

dialogService

上的

addDialog

方法，传入一个包含一些数据的组件，然后订阅该组件的结果

不清楚您打算在该对话框中发生什么，但似乎在该对话框关闭之前，它不会填充您订阅的可观察对象，并且在推送该值之前，

subscribe

将不会被调用以执行您已设置的间隔

选择1 这里最简单的方法可能是只获取组件中的输入值，并在其自己的

@input

中将其传递给子组件。Angular将处理跨每个组件的更改跟踪和更新

@Input() iData: any;

您仍然没有发布您的

ScreeningCommentDialog

的外观，也没有发布您的

dialogService

的详细信息，因此我不得不在这里做一些假设，但要点如下：

this.dialogService.addDialog(ScreeningCommentDialog, {
  objScreeningProvider: comments ? comments : new ScreeningProvider(),
  investigateData: this.investigateData  
})

假设addDialog正在创建

ScreeningCommentDialog

的实例，那么您可以提供您的调查数据值，以注入到随后提供程序上公开的@Input属性中。例如，在您的服务中，这可能如下所示：

//Service constructor for DI injection
constructor(private _cr: ComponentResolver)
//...
public addDialog(type: any, data: any): Observable<string> //Hard to say what type this returns from your sample
{
  this._cr.resolveComponent(type).then(factory => {
    let componentRef = this.childContainer.createComponent(factory);
    //This line will write the value of your local investigateDatavalue to an @Input property on the new component instance
    componentRef.instance.iData = this.investigateData; //Renamed for ease in understanding relationship between my exmaples
  });
}

然后，当您必须创建新组件时，您还将写入它自己的输入属性，并继续传递该数据

选择2 为什么不在组件加载到页面时订阅的

ScreeningCommentDialog

组件上创建一个静态主题，然后在更新时使用此组件将值推送到主题。这将为您的目标提供一种更为严格的方法，但与处理跨多个组件的依赖@Input属性链的维护相比，这并没有多大区别

在随后的

ScreeningCommentDialog

组件上，创建如下内容（正在使用的，以便它能够调用提供给它的最后一个值）：

在上面发布的组件中，使用ngOnChanges方法识别输入属性的更改，然后使用该调用将新数据推送到对话框上的静态主题

ngOnChanges(changes: SimpleChanges) {
  ScreeningCommentDialog.investigateData.next(changes.investigateData.currentValue);
}