Angular - 将一个组件作为参数传递给另一个组件

Question

在虚拟Angular应用程序中，我有两个组件：counter和test01。正如您在repository file

上看到的那样

这个GitHub存储库包含一个完整的工作示例。

请检查此图片。

如果单击按钮：“更改计数器值”，它会将计数器编号设置为：8成功。

但我的问题是：如何将counter组件传递给test01组件，以便更轻松地更改test01方法中的值？

现在组件的逻辑：test01更加困难，因为你可以看到here

我想做点什么：

test01_obj.counter = 8;

没有太多代码。

对此有什么想法吗？

Answer 1

您正在以错误的方式解决问题。

我建议您分享两个组件之间的模型（计数），并依靠绑定来实现[间接]交互。

即：

 export class ContainerComponent {

   myCounterModel: CounterModel = {
       count: 0
   };
   ...
 }

export class CounterComponent {
    ...
    @Input()
    counter: CounterModel;
}

export class Test01Component {
    ...
    @Input()
    counter: CounterModel;
}


  //ContainerComponent template

<counter [(counter)]="myCounterModel"></counter>
<hr />
<test01 [(counter)]="myCounterModel" [resetValue]="8"></test01>

有道理吗？