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

发布时间：2020-12-17 17:50:38 所属栏目：安全来源：网络整理

导读：简介：我正在研究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-

简介：我正在研究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>的状态.基于click / mouseenter / mouseleave事件,以及当< card>内部发生某些动作时组件(父组件),基于当前状态,我想在< 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>

静态变量正确传递.

有人有类似的问题吗？或者知道如何解决这个问题？

解决方法

你可以尝试这样的事情：

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!