angular – EventEmitter无法使用bootstrap模式解析正确的参数

发布时间：2020-12-17 17:26:03 所属栏目：安全来源：网络整理

导读：使用bootstrap模式处理angular2 EventEmitter,但是每当我通过子组件的事件传递一些参数时,只有在Bootstrap模式的情况下,角度才解析为正确参数,否则一切正常.为什么？我做错了什么？调用子组件编码(父组件) – ul li *ngFor='#value of abc' child-component

使用bootstrap模式处理angular2 EventEmitter,但是每当我通过子组件的事件传递一些参数时,只有在Bootstrap模式的情况下,角度才解析为正确参数,否则一切正常.为什么？我做错了什么？

调用子组件编码(父组件) –

<ul>
  <li *ngFor='#value of abc'> 
    <child-component (everySecond)="everySecond(value)"></child-component>{{view}}
  </li>
</ul>

子组件编码 –

<div class="modal fade" id="delete_category" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header modal_header_color">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Delete</h4>
            </div>
            <div class="modal-body">
                <div class="row margin_both">
                    <div class="col-md-12">
                        <div class="row form-group text-center">
                            <span>Are you sure you want to Delete !</span>
                        </div>
                        <div class="row form-group">
                            <div class="text-center">
                                <button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
                                <button type="button" class="btn btn-danger" (click)='call()' data-dismiss="modal">Delete</button>  //not working
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#delete_category">
    <span class="glyphicon glyphicon-trash"></span>
</button>  

  <---working ---->
    <button (click)='call()' class='btn btn-info btn-sm'>Working Button</button>  //works fine

  <---working ---->

plunkr同样在这里http://plnkr.co/edit/2rlvpMpcTd0Gk8DelwoP?p=preview

解决方法

每个ChildComponent元素使用相同的id =“delete_category”. Bootstrap模式使用第一个与id匹配的模式,它始终是第一个带有demoInput == 1的ChildComponent

更改两行可以修复它

<div class="modal fade" id="delete_category{{demoInput}}" role="dialog">

<button type="button" class="btn btn-danger" data-toggle="modal" 
    attr.data-target="#delete_category{{demoInput}}">

另请注意添加的attr.用于属性绑定.

更新

您可以在id =“delete_category {{demoInput}}”中使用demoInput的随机值.

似乎没有必要使用与everySecond(value)中相同的值.只有id和attr.data-target中使用的值在一个ChildComponent中需要相同,而同时它们需要在不同的ChileComponents之间不同.

我会用

class ChildComponent {
  private static cmpId = 0; 

  // getter to make it available for binding from the template 
  // because this doesn't work with statics
  private get componentId() => ChildComponent.prototype.cmpId++;

  // I'm not sure if this ^^^ is the correct way to access static
  // fields in TypeScript.
}

<div class="modal fade" id="delete_category{{componentId}}" role="dialog">

<button type="button" class="btn btn-danger" data-toggle="modal" 
    attr.data-target="#delete_category{{componentId}}">

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!