单击事件未在语义 UI 模态上第二次触发 angular 2 rc4

Question

我正在为我的应用程序使用具有语义 UI 的 angular 2(rc 4)。在从 productList 屏幕上的产品列表中删除产品之前，我使用语义 UI 模式进行确认。预期的功能如下： 1）点击删除按钮 2）模态弹出窗口进行确认 3) 单击 no/deny，模态隐藏，返回到 productList 屏幕。 4) 单击 yes/approve，产品从列表中删除，产品列表屏幕更新，第二个模式弹出删除成功消息。

下面编写的代码工作正常，正如预期的那样，对于第一个要删除的产品，但是当我点击删除另一个产品时，模态确实出现了，但是没有触发模态上的点击事件，因此产品是没有删除。不确定模态是否在第一次使用后从 DOM 中删除。有什么想法吗？提前致谢！

productList.html

` <body>
    <table class="ui celled table">
        <thead>
        <tr>
            <th>Date Range</th>
            <th>Name</th>
            <th>Frequency</th>
            <th>Actions</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let product of products">               
            <td>{{ product.startDate | date: 'dd MMM y'}} - {{ product.endDate | date: 'dd MMM y' |
                ifEmpty:'Ongoing'}}
            </td>
            <td>{{ product.name }}</td>
            <td>{{ product.emailFrequency | titleCase : 1 }}</td>
            <td>
                <div class="ui stackable three columns grid">
                    <div class="column">
                        <button id="edit" class="ui icon basic button" (click)="editProduct(product)">
                            <img src="/img/edit.svg"/>
                            <label>Edit</label>
                        </button>
                    </div>
                    <div class="column">
        <button id="deleteButton" class="ui icon basic button coupledModal">
                         <img src="/img/delete-button.svg"/>
                            <label>Delete</label>
                        </button>
  <coupledModal (onClicked)="deleteProduct($event, product)"></coupledModal>
                    </div>
                </div>
            </td>
        </tr>
        </tbody>
    </table>

`

模态-component.ts

 ` @Component({
selector: "coupledModal",
template: ``       
   <div class="ui small first coupled modal">
        <div class="header">Are you sure?</div>
        <div class="content">
            <div class="description">
            <p>If you delete this product, it will be gone forever.</p>
            </div>
        </div>
        <div class="actions segments">
            <button class="ui basic button grey deny" (click)="onClick(false)">
                <i class="remove icon"></i>No thanks</button>
            <button class="ui basic button approve" (click)="onClick(true)">
                <i class="checkmark icon"></i>Yes please</button>
        </div>
   </div>
   <div class="ui small second coupled modal">
        <div class="header">Done!</div>
        <div class="content">
            <div class="description">
                <i class="huge green check circle outline icon"></i>
                <p>Product Deleted Successfully.</p>
            </div>
        </div>
        <div class="actions">
            <div class="ui basic button ok">
                <i class="checkmark icon"></i>Done
            </div>
        </div>
   </div> 
 `,
 })
 export class ConfirmModalComponent {
@Output() public onClicked = new EventEmitter<boolean>();

public ngAfterViewInit() {
    /* tslint:disable */
    $('.coupled.modal')
        .modal({
            allowMultiple: false,
            closable  : false,
           // detachable: false,
            selector    : {
                close    : ".close, .actions .button",
                approve  : ".actions .approve, .actions .ok",
                deny     : ".actions .deny"
            }
        });
    // show first of linked modals
    $('.first.modal')
        .modal('attach events', '.button.coupledModal')
    ;
    // attach events to buttons
     $('.second.modal')
        .modal('attach events', '.first.modal .button.approve')
     ;
    /* tslint:enable */
}

public onClick(approved) {
    this.onClicked.emit(approved);
}
}`

列表-component.ts

` @Component({  
 directives: [ ConfirmModalComponent],
 pipes: [TitleCase, IfEmpty, StatusFormat],
 providers: [SingleSignonDataService, ProductDataService],
 selector: "productList",
 templateUrl: "/templates/products/product-list-component.html",
})

export class ProductListComponent implements OnInit {
public products: Product[] = null; 
public model: Product;
private dataService: ProductDataService;   

constructor(dataService: ProductDataService,
          private cookieService: CookieService, private signinService: SingleSignonDataService,
          private directTo: Router) {
this.dataService = dataService;

}

 public deleteProduct(userAction, product) {
    if (userAction) {
        this.dataService.deleteProduct(product.id)
            .then(result => {
                let exists = this.products.indexOf(product);
                if (exists > -1) {
                    this.products.splice(exists, 1);
                }
            })
            .catch((error) => {
                this.errorState = JSON.stringify(error);
            });
    }
}

演示插件 link : https://plnkr.co/edit/Wxqz5DvUES3nh4RogNnr?p=preview

Answer 1

您的处理程序 onButtonClick 在关闭第一个弹出窗口后被删除。我认为你应该为每个模态使用唯一的 id:

app.component.ts

<coupledModal [id]="i"  ...></coupledModal>

modal.component.ts

html

<div id="first-modal-{{id}}" ...
...
<div id="second-modal-{{id}}" ...

class

export class ConfirmModalComponent implements AfterViewInit {
  @Input() id;

  public ngAfterViewInit() {
    $('#first-modal-' + this.id, '#second-modal-' + this.id)
      .modal({
        allowMultiple: false,
        closable: false,
        selector: {
          approve: ".actions .approve, .actions .ok",
          deny: ".actions .deny"
        }
      });
    // show first of linked modals
    $('#first-modal-' + this.id)
            .modal('attach events', '#deleteButton-' + this.id);
        //   // attach events to buttons
    $('#second-modal-' + this.id)
            .modal('attach events', '#first-modal-' + this.id + ' .button.approve');
  }

Updated Plunker

单击事件未在语义 UI 模态上第二次触发 angular 2 rc4

click event not triggered second time on semantic UI modal with angular 2 rc4

modal-dialog

semantic-ui

angular