将可观察到的数据从父组件传递到使用Angular 2+中的componentFactoryResolver创建的子组件 [英] Pass Observable data from Parent Component to a Child Component created with componentFactoryResolver in Angular 2+

问题描述

我需要帮助，因为我现在有点迷茫.因此，我有一个组件可以使用componentFactoryResolver将子组件动态地注入其模板中，这是我的HTML

I need help as I am a bit lost right now. So, I have a component that dynamically injets a child component into its template using componentFactoryResolver , here is my HTML

<div class="dialog">
    <div #container></div>
    <button (click)="move('back')">Back</button>
    <button (click)="move('forwards')">Forwards</button>
</div>

在我的组件中，我也有一个可观察到的对象，它可以像这样捕获按钮的点击，这是我的(编辑/精简)代码

also in my component I have an observable that captures the click of the buttons like so, here is my (edited / reduced) code

// parent-component.ts

@ViewChild('container', {read: ViewContainerRef})
public dialogContainer: ViewContainerRef;

public navigationClick$: Observable<string> = new Subject<string>();

// click event on buttons
public move(direction): void {
    this.navigationClick$.next(direction);
}

// code to inject child dynamic component, please ignore the args / variables

const componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.data.component);
this.componentRef = this.dialogContainer.createComponent(componentFactory);
this.embeddedcomponent = this.componentRef.instance as IWizardDialog;
this.embeddedcomponent.data = this.data.data;

现在我想将最新的可观察值从navigationClick $传递给子组件，因此我在父组件中修改了代码...

Now I would like to pass the latest observable value from navigationClick$ to the child component I amend the code in my parent component thus...

const componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.data.component);
this.componentRef = this.dialogContainer.createComponent(componentFactory);

// NEW CODE
// here I subscribe to the observable and try to pass the value to the child component
this.navigationClick$.subscribe((data: string) => {
  this.componentRef.instance.direction = data;
});

this.embeddedcomponent = this.componentRef.instance as IWizardDialog;
this.embeddedcomponent.data = this.data.data;

订阅在父级中正常工作，但是我不确定如何将订阅数据捕获/传递给子组件，例如，我可以将其声明为Input()

The subscribe is working in the parent as I would expect however I am unsure how I would capture / pass the subscribe data to the child component, for example can I just declare this as a Input()

// child-component.ts

@Input() public direction: string;

但是，这只是不确定的，不是我所需要的.如何传递来自订阅到子组件的方向数据，或者我需要什么代码/功能来接收事件/方向字符串?任何建议表示赞赏.

However this will just be undefined and isn't what I need. How do I pass the direction data from the subscribe to the child component or what code / feature do I need to receive the event / direction string? Any advice is appreciated.

如果我的措辞不好或令人困惑，请说出来，我将重新解决问题.

If my wording is bad or confusing please say and I will rework the question.

推荐答案

我会使用服务.不是ViewChild.借助服务，这些组件将不需要彼此了解

I would use a service. Not ViewChild. With a service the components would not need to know of each other

 @Injectable()
  export class YourService {
  move$: Observable<any>;
  private moveSubject: Subject<any> = new Subject();

  constructor() {
    this.move$ = this.moveSubject.asObservable();
  }

  public move(direction) {
     this.moveSubject.next(direction);
  }


}

在父母中的用法

contructor(public yourService:YourService){
}

父级

html

html in parent

<button (click)="yourService.move('back')">Back</button>

在儿童中的用法

YourChild implements OnInit, OnDestroy {
    private subscriptions: Subscription = new Subscription();
    constructor(private yourService:YourService) {

    }
    ngOnInit(): void {
        this.subscriptions.add(this.yourService.move$.subscribe(direction => {
            //Do something
        }));        
    }
    ngOnDestroy(): void {
    this.subscriptions.unsubscribe();
}

}

这篇关于将可观察到的数据从父组件传递到使用Angular 2+中的componentFactoryResolver创建的子组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！