父變量不是NG-裏面的內容合作

Question

簡介：我正在NG2部件，其結構是這樣的：

<cards> 
    <card> 
    <card-content-type-1 (state)="cardState"></card-content-type-1> 
    </card> 
    <card> 
    <card-content-type-2 (state)="cardState"></card-content-type-2> 
    </card> 
    <card> 
    <card-content-type-3 (state)="cardState"></card-content-type-3> 
    </card> 
    ... 
</cards> 

而且我根據點擊改變每個<card>的狀態/的mouseenter/mouseleave事件，並且當某個動作發生在<card>組件（父組件）內時，基於當前狀態，我想在<card-content-type-N>組件（子組件）中觸發一些動畫方法。對於動畫序列，我將使用AnimationBuilder和ElementRef。

---

問題：我決定把父組件變量傳遞給孩子組件，並實現ngOnChanges()兒童的內部，這將觸發特定的動畫取決於當前的變量值。但是當我在父模板中使用ng-content時，我遇到了將父變量傳遞給子元素的麻煩。

我創建簡化的例子（I替換<card>與<parent-comp>，並<card-content-type-N>與<child-comp>）：https://plnkr.co/edit/OHIJjMwdx6ifRiSxsanB?p=preview

在這個例子中parentVar不傳遞到child-comp。這是Angular2中的一些錯誤還是我做錯了什麼？我想這與ng-content範圍有關，但我們缺乏關於此的良好文檔/示例。

在src/parent-comp.ts的相同示例中，如果我們用<child-comp [childVar]="parentVar"></child-comp>代替首選模板，則正確傳遞父變量。

同樣的src/app.ts裏面，如果我們這個替換初始模板：

<parent-comp> 
    <child-comp [childVar]="true"></child-comp> 
</parent-comp> 

靜態變量正確傳遞。

有人有類似的問題嗎？或者有想法我怎麼能解決這個問題？

Answer 1

你可以嘗試這樣的事情：

<parent-comp #parent> 
    <child-comp [childVar]="parent.parentVar"></child-comp> 
</parent-comp> 

這裏是plunkr https://plnkr.co/edit/rVMruocy2Mhtl4yTmvio?p=preview

Answer 2

我認爲裝飾師ContentChildren可能會幫助你。

export class ParentComp { 

    @ContentChildren(ChildComp) childs: QueryList<ChildComp> 

    doSth(parentVar) { 
    this.childs.toArray().forEach(child=> child.childVar = parentVar); 
    } 

} 

不確定它是否是你想要的。 這裏是plunker： https://plnkr.co/edit/Lx5IFtjMMA20WCj4P2bF?p=preview