Angular 如何在prent和child视图中两次使用组件（DI是共享的，comp是单例的）

我有一个按钮组件（具有特定于应用程序的行为），我打算在应用程序中广泛使用。问题是，当我有一个父/子视图，我使用这个按钮时，点击paren't按钮会触发子视图按钮的[动作]：如果你没有几年的面向对象编程，你自然不会得到发生的事情。（这对于让年轻的学校新手使用dart来说是非常糟糕的一点…）

只是为了解释这个问题：dart中的每个组件在其作用域中都是一个单独的组件（每个树节点的作用域不同，父/子关系除外）。这是一个很好的优化实践，但我认为应该有一个强制属性，用于获取值的组件

scope="prototype|optimized"

这将帮助新手理解其背后的概念

是否有一种解决方案可以为每个DI注入获取一个新实例

代码如下：

button.html

<img src="{{src}}" (click)="click()" (mouseover)="hover()" (mouseleave)="blur()"  class="imgBtn" />

如果我在UsersComp中有两个按钮，或者在UsersComp中有一个按钮，在它的任何子组件中都有一个按钮，那么我会在每个地方都得到相同的按钮实例：我注意到，因为点击UsersComp的按钮触发了它的子组件的“动作”

用户_comp.html

 <div class="titleDiv">
    <btn [action]="add"
         [sources]="['../images/addPerson.bmp', '../images/addPerson-h.bmp', '../images/addPerson-c.bmp']"
         class="addBtn"></btn>
    <div class="title">people</div>

人

及 invite-dialog-comp.html

<div class="modal-footer">
      <btn [action]="save(search.value)" [sources]="['../images/ok.bmp', '../images/ok-h.bmp', '../images/ok-c.bmp']" class="saveAdd"></btn>
    </div>

使用此提供程序获取相同的按钮

provide('myFactory', useFactory: (dep1, dep2) => () => new Foo(dep1, dep2), deps: [Dep1, Dep2])

您可以创建新实例，如

class MyComponent {
  MyClass(@Inject('myFactory') Function myFactory) {
    var prevInstance;
    for(var i = 0; i < 5; i++) {
      var newInstance = myFactory();
      print('$i: ${identical(newInstance, prevInstance)}');
      prevInstance = newInstance;
    }
  }
}

类MyComponent{
MyClass（@Inject（'myFactory'）函数myFactory）{
var实例；
对于（变量i=0；i<5；i++）{
var newInstance=myFactory（）；
打印（“$i:${idential（newInstance，prevInstance）}”）；
prevInstance=newInstance；
}
}
}

您是否介意添加一些代码来演示您试图完成的任务？我不知道我在其他评论中提出的建议是否真的适用。组件从来都不是单体。添加到DOM中的每个按钮都是一个新的不同实例。单击可能会传播<代码>单击是一个DOM事件和气泡。您可以尝试

（单击）=“单击（）；$event.stopPropagation（）”

，以防止冒泡。我无法从您的代码中看到组件是如何使用的以及它们是如何嵌套的。你能添加组件模板的部分来演示吗？嗨，谢谢你的回答！，这是有希望的。你能给我指一份关于供应商的文件吗？你似乎用另一种方式回复了某人：我更新了你链接的答案

provide（）

只能在不需要常量上下文的情况下使用（例如

bootstrap（AppComponent，[provide（…）]）

，但是像

@Component（…）

这样的注释只允许常量值作为参数，并且对于该

常量提供程序（…）必须使用
。仍在试图找出实际问题所在。您可以放心地假设，每次应用程序中出现
，都会创建一个新的
按钮comp
实例。您传递的
操作可能有问题。Angular2通常不是这样做的。在子组件中使用带有
@Output（）EventEmitter action=new EventEmitter（）
的事件绑定
（action）=“add（$event）”
，或者使用共享服务（通常带有
流
）通知其他组件所发生的操作，通常是在通信组件不是直接父子组件时）好吧，我想我在抽象中迷失了方向：我只是在所有地方添加了一个（单击）=“action（）”，而不是试图将action（）函数作为变量保存在指令中（并在需要时动态更改它们）。现在一切都好了，以后我可能会有更多的知识，更好地理解发生了什么。（单击）输出现在足以满足我的需要
provide('myFactory', useFactory: (dep1, dep2) => () => new Foo(dep1, dep2), deps: [Dep1, Dep2])

class MyComponent {
  MyClass(@Inject('myFactory') Function myFactory) {
    var prevInstance;
    for(var i = 0; i < 5; i++) {
      var newInstance = myFactory();
      print('$i: ${identical(newInstance, prevInstance)}');
      prevInstance = newInstance;
    }
  }
}