Javascript 角度-将一个组件作为参数传递给另一个组件

在虚拟

Angular

应用程序中，我有两个组件：

counter

和

test01

。正如你在地图上看到的

这个GitHub存储库包含一个完全有效的示例

请检查这张图片

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

但我的问题是：如何将

计数器

组件传递给

test01

组件，以更简单的方式更改

test01

方法中的值

现在，组件的逻辑：

test01

更加困难，正如您所看到的

我想做一些类似的事情：

test01_obj.counter = 8;

没有太多的代码

---

对此有什么想法吗？

你处理问题的方式不对

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

i、 e:

出口级集装箱组件{
myCounterModel:CounterModel={
计数：0
};
...
}
出口级反元件{
...
@输入（）
计数器：计数器模型；
}
导出类Test01组件{
...
@输入（）
计数器：计数器模型；
}
//容器组件模板

---

有意义吗？

那么，我在哪里声明：

let model:CounterModel

，在一个独立的文件中？或者一些已经存在的文件？例如，在容器组件中，请检查更新的代码段

 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>