Question

我创建了一个以模态形式打开的组件，并将其放置在我的表单中，如下所示：

<app-customer-definition [customerCode]="null" (save)='customerSave($event)' (cancel)='customerCancel()'></app-customer-definition>

并使用以下按钮代码打开表单：

<button type="button" class="btn btn-primary" data-toggle="modal" (click)="btnNewCompanyClick()" data-target="#mdlCustomerDefinition">
  <span>
    <i class="la la-plus"></i>
    <span>New Customer</span>
  </span>
</button>

我传递customerCode作为输入参数。如果customerCode等于null，则模态表单创建一个新的客户实例，customerCode是已定义的模态表单，以获取ngOnInit中的更新客户数据。

对于第一次调用，将打开模态窗体并按预期工作。但是在其他调用中ngOnInit没有被触发，所以我的逻辑不起作用。我应该改变我的逻辑（如何）或如何在ngOnInit或其他事件中运行我的逻辑？

Answer 1

使用bootstrap4模式，你只需隐藏＆amp;第一次显示模态时你点击按钮然后模态实例来＆amp;当你删除模态而不是它只是隐藏它但是它存在于DOM中时，当模态收入在行动中时，组件inicialized＆amp; noOnInit工作，但是当你第二次打开模态时，模态只是重新打开，但它不会创建组件的新实例，

而不是noOnInit你可以使用angular2或ngDoCheck的生命周期钩子方法的ngOnChange方法

Answer 2

@EnesKöroğlu，我已更新代码，stackblitz.com/edit/angular-cam1b8使用此链接查看，其工作正常，根据您的要求

Answer 3

当页面加载时将变量标记为false。当你加载模态时，然后将值标记为false＆amp;在下一行标记变量为true，例如： -

var a=false;
  constructor(){
    this.a = false;
   }

<button **(onclick)="methodCall()"** type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Launch demo modal</button><div class="modal" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"><div class="modal-dialog" role="document">
<div class="modal-content" **ngif= "a"** >
  <div class="modal-header">
    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    ...
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
  </div>
</div>

`

 methodCall(){
  this.a = false;
  this.a = true;
  }

请使用这种方式解决我的问题，也只有与此相关的问题

ngOnInit不能以模态形式第二次工作

3 个答案: