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>

我正在根据click / mouseenter / mouseleave事件更改每个<card>的状态，并且当<card>组件（父组件）内部发生某些操作时，基于当前状态，我' d想在<card-content-type-N>组件（子组件）中触发一些动画方法。对于动画序列，我将使用AnimationBuilder和ElementRef。

问题：我决定将父组件变量传递给子组件，并在子组件中实现ngOnChanges()，这将触发特定动画取决于当前变量值。但是当我在父模板中使用ng-content时，我将父变量传递给子节点时遇到了麻烦。

我创建了简化示例（我将<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

父变量不在ng-content内部工作

2 个答案: