Как использовать компонент дважды в представлении с пентаном и дочерним элементом (DI является общим, а comp является одиночным)

Question

У меня есть компонент кнопки (с конкретным приложением), который я намеревался широко использовать в приложении. Проблема в том, что когда у меня есть родительские/дочерние представления, где я использую эту кнопку, щелчок на кнопке paren't вызывает [действие] кнопки просмотра ребенка: естественно, вы не понимаете, что происходит, если вы не делаете имеют несколько лет объектно-ориентированного программирования. (что довольно плохо для того, чтобы получить младших школьных новичков, чтобы использовать дарт ...)

Просто для объяснения проблемы: каждый компонент в дроте является одноточечным в своем объеме (область действия различна для каждого узла дерева, кроме для отношения родитель/ребенок). Это хорошая практика оптимизации, но я думаю, что должно быть обязательным атрибутом для компонента, который принимает значения

scope="prototype|optimized" 

Это iblige послушников, чтобы понять концепции, лежащие в ней ...

Есть решение для получения нового экземпляра для каждой инъекции DI?

Это код:

button.html

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

button.dart

import 'package:angular2/core.dart'; 

@Component(
     selector: 'btn', 
     templateUrl: 'button_comp.html', 
     styleUrls: const['button_comp.css'] 
) 
class ButtonComp { 
    String src; 
    Function btnAction; 
    List<String> _srcList; 
    @Input() bool disabled; 

    @Input() 
    void set sources(List<String> srcList) { 
     if(srcList?.length != 3) 
      print('there must be 3 files for the states : default, hover and clicked. Found : ${srcList?.toString()} for ${btnAction.toString()}'); 
     _srcList = srcList; 
     src = srcList == null ? 'invalidState' : srcList[0]; 
    } 

    @Input() set action(Function btnAction) { 
     this.btnAction = btnAction; 
    } 

    void hover() { 
     src = _srcList[1]; 
    } 

    void blur() { 
     src = _srcList[0]; 
    } 

    void click() { 
     src = _srcList[2]; 
     if(btnAction != null) 
      this?.btnAction(); 
    } 
} 

Затем я использую эту кнопку во многих местах (зная, что я могу сделать это развиваться через app life)

Например,

@Component(
    selector: 'users-comp', 
    templateUrl: 'users_comp.html', 
    styleUrls: const ['users_comp.css'], 
    directives: const[ButtonComp, TextComp, InviteUsersDialogComp] 
) 
class UsersComp implements OnInit { 
//... 
} 

Если у меня есть две кнопки в UserComp или одна кнопка в UserComp и одна в любом из ее дочерних элементов, то я получу один и тот же экземпляр кнопки везде: я заметил, что, поскольку нажатие на кнопку UserComp вызывает 'действие' свернете

users_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> 

и приглашениям диалогового 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> 

получить ту же самую кнопку

Answer 1

С этим провайдером

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; 
    } 
    } 
}