将可见数据从父组件传递到使用componentFactoryResolver创建的Angular 2+中的子组件

Question

我需要帮助，因为我现在有点迷路了。所以，我有一个动态injets子组件为使用componentFactoryResolver其模板的组成部分，这是我的HTML

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

也是在我的组件我有一个观察的捕获像这样的按钮的点击，这里是我的（编辑/缩小）代码

// 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 $传递最新观察到的值的子组件我修订因而我的父母组件的代码...

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()

// child-component.ts 

@Input() public direction: string; 

然而，这将只是未定义，不是我所需要的。如何将订阅中的方向数据传递给子组件，或者我需要接收事件/方向字符串的代码/功能？任何建议表示赞赏。

如果我的措辞不好或令人困惑，请说，我会重新提出这个问题。

Answer 1

我会使用一项服务。不是ViewChild。随着服务的组件不需要父知道对方

@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在父母在孩子

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(); 
} 

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

用法}