將可見數據從父組件傳遞到使用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> 

用法}