如何在使用TemplateRef时更新更改数据，该TemplateRef来自Angular中的子组件中的父组件

我有一个子组件，它从父级像EmbeddedView一样呈现模板

exports class ParentComponent {
   public someProp: string;

   ngOnInit() {
      this.someHttpFunc();
   }

   public someHttpFunc() {
      // make some http call and update this.someProp
   }
}

导出类子组件{
@Input（）someRef:TemplateRef
@ViewChild（“content”，{read:ViewContainerRef}）contentRef:ViewContainerRef；
恩戈尼尼特（）{
this.contentRef.createEmbeddedView（someRef）；
}
}

My parent.component.html：

<child someRef="template"></child>
<ng-template #template>

  <div>{{ someProp }}</div>
</ng-template>

{{someProp}}

My child.component.html

<div #content></div>

<child someRef="template"></child>
  <ng-template #template>

  <div>{{ someProp$ | async }}</div>
</ng-template>

问题是当http调用

someHttpFunc（）

finish时，子组件中someProp的结果不会自动更新。当我为

this.contentRef.createEmbeddedView（someRef）设置超时时
一切都很好，但肯定不是一个好的解决方案
也许您可以尝试使用setter，如下面的代码


导出类子组件{
@输入（）
设置someRef（newTemplate:TemplateRef）{
如果（！newTemplate）{
返回；
}
this.contentRef.createEmbeddedView（someRef）；
}
@ViewChild（“内容”{
阅读：ViewContainerRef
})contentRef:ViewContainerRef；
}
也许您可以尝试使用setter，如以下代码


导出类子组件{
@输入（）
设置someRef（newTemplate:TemplateRef）{
如果（！newTemplate）{
返回；
}
this.contentRef.createEmbeddedView（someRef）；
}
@ViewChild（“内容”{
阅读：ViewContainerRef
})contentRef:ViewContainerRef；
}
尝试执行以下操作：

parent.component.ts

exports class ParentComponent {
   public someProp$: Observable<string>;
   private propSource: Subject<string>;

   constructor() {
     this.propSource = new Subject();
     this.someProp$ = this.propSource.asObservable();
   }
   ngOnInit() {
      this.someHttpFunc();
   }

   public someHttpFunc() {
      // psuedo code for http calls
      httpCall.subscribe(() => {
        const newValue = 'x'; // here it's the new value of your props
        this.propSource.next(newValue)
      });
   }
}

导出类ParentComponent{
公共资产：可见；
私人资料来源：主体；
构造函数（）{
this.propSource=新主题（）；
this.someProp$=this.propSource.asObservable（）；
}
恩戈尼尼特（）{
this.someHttpFunc（）；
}
public someHttpFunc（）{
//http调用的psuedo代码
httpCall.subscribe（（）=>{
const newValue='x'；//这是道具的新值
this.propSource.next（newValue）
});
}
}

parent.component.html

<div #content></div>

<child someRef="template"></child>
  <ng-template #template>

  <div>{{ someProp$ | async }}</div>
</ng-template>


{{someProp$| async}}
尝试执行以下操作：

parent.component.ts

exports class ParentComponent {
   public someProp$: Observable<string>;
   private propSource: Subject<string>;

   constructor() {
     this.propSource = new Subject();
     this.someProp$ = this.propSource.asObservable();
   }
   ngOnInit() {
      this.someHttpFunc();
   }

   public someHttpFunc() {
      // psuedo code for http calls
      httpCall.subscribe(() => {
        const newValue = 'x'; // here it's the new value of your props
        this.propSource.next(newValue)
      });
   }
}

导出类ParentComponent{
公共资产：可见；
私人资料来源：主体；
构造函数（）{
this.propSource=新主题（）；
this.someProp$=this.propSource.asObservable（）；
}
恩戈尼尼特（）{
this.someHttpFunc（）；
}
public someHttpFunc（）{
//http调用的psuedo代码
httpCall.subscribe（（）=>{
const newValue='x'；//这是道具的新值
this.propSource.next（newValue）
});
}
}

parent.component.html

<div #content></div>

<child someRef="template"></child>
  <ng-template #template>

  <div>{{ someProp$ | async }}</div>
</ng-template>


{{someProp$| async}}
改用observable
{{someProp$| async}}
我已经在使用observable，
someProp
是将在
中更新的属性名称。subscribe（）
欢迎使用Angular中的更改检测。这是一个更广泛的主题，需要了解它是如何工作的，在深入了解组件之间交叉引用模板的更多优势技术之前，您应该先了解这一点。当可观察对象发出值时，
async
管道将视图标记为脏视图。这是我给你的快速修复，因为猜猜谁的视图需要更新？
ChildComponent
，这是
async
管道实例将运行的地方<代码>父组件

不呈现模板。因此，没有表达式已更改以将视图标记为脏。我建议您阅读以下内容：使用observable，而不是

{someProp$|async}

我已经在使用observable，

someProp

是将在

中更新的属性的名称。subscribe（）

欢迎在Angular中进行更改检测。这是一个更广泛的主题，需要了解它是如何工作的，在深入了解组件之间交叉引用模板的更多优势技术之前，您应该先了解这一点。当可观察对象发出值时，

async

管道将视图标记为脏视图。这是我给你的快速修复，因为猜猜谁的视图需要更新？

ChildComponent

，这是

async

管道实例将运行的地方<代码>父组件不呈现模板。因此，未更改任何表达式以将视图标记为脏。我建议您阅读以下内容：