Question

我有一个按钮组件（具有应用程序特定的行为），我打算在应用程序中广泛使用。问题是当我有父/子视图时我使用这个按钮，点击按钮会触发孩子视图按钮的[动作]：你自然不会如果您没有多年的面向对象编程，那么就会发生什么。（让年轻的学校新手使用飞镖是非常不好的一点......）

只是为了解释这个问题：dart中的每个组件都是其范围内的单例（每个树节点的范围都不同，父/子关系除外）。这是一个很好的优化实践，但我认为应该有一个带有值

的组件的强制属性

scope="prototype|optimized"

这将使新手了解其背后的概念......

是否有解决方案为每次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();
    }
}

然后我在许多地方使用此按钮（知道我可以通过应用程序生活进化）

例如

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

如果我在UsersComp中有两个按钮，或者在UsersComp中有一个按钮，在任何一个子节点中都有一个按钮，那么我将在任何地方获得相同的按钮实例：我注意到因为点击UsersComp的按钮触发了＆＃39 ;动作＆＃39;其子组件

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

使用此提供商

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

您可以创建新的实例，例如

{{1}}

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

1 个答案: