从angular

Question

我有一个模态，它的模态主体在子组件中，而外部模态（例如ex：modal header）在父组件中。在模式主体中，我有“提交”按钮。当我单击提交按钮时，我想关闭父组件中的外部模态主体部分。我该怎么办？

  

父级组件

<div class="modal fade" id="addUserModal">
<div class="modal-dialog">
<div class="modal-content">

  <!-- Modal Header -->
  <div class="modal-header">
    <h4 class="modal-title">Add User</h4>
    <button type="button" class="close" data-dismiss="modal">&times;</button>
  </div>

  <!-- Modal body -->
  <div class="modal-body">
    <app-signup (addNewUser)="onAddUser($event)"></app-signup>
  </div>
</div>

  

子组件

<form name="form" (ngSubmit)="onSignup()" #signUp="ngForm" novalidate>
<li>
<div class="form-group">
  <label for="firstName">First Name</label>
  <input type="text" class="form-control" name="firstName" [(ngModel)]="model.firstName" #firstName="ngModel"
     required />
     <span class="help-block" *ngIf="firstName.invalid  && firstName.touched">
        *First Name is required
    </span> 
</div>
</li>
<li>
<div class="form-group">
  <label for="lastName">Last Name</label>
  <input type="text" class="form-control" name="lastName" [(ngModel)]="model.lastName" #lastName="ngModel"
     required />
     <span class="help-block" *ngIf="lastName.invalid  && lastName.touched">
        *Last Name is required
    </span> 
</div>
</li>
<li>
<div class="form-group">
  <label for="username">User Name</label>
  <input type="text" class="form-control" name="username" [(ngModel)]="model.username" #username="ngModel"
     required />
     <span class="help-block" *ngIf="username.invalid  && username.touched">
        *User Name is required
    </span>    
</div>
</li>
<li>
<div class="form-group">
  <label for="email">Email</label>
  <input type="text" class="form-control" name="email" [(ngModel)]="model.email" #email="ngModel"
    required email />
  <div *ngIf="email.invalid && email.touched" class="help-block">
      <div *ngIf="email.errors.required">Email is required</div>
      <div *ngIf="email.errors.email">Email must be a valid email address</div>
  </div>
</div>
</li>
<li>
<label>Role</label><br>
<select required class="form-control" name="role" [(ngModel)]="model.role" #role="ngModel"
  >
      <option [ngValue]="null">Select Role</option>
    <option *ngFor= 'let val of role_data'>{{val}}</option>
</select><br>
<span class="help-block" *ngIf="role.invalid  && role.touched">
    *Role is required
</span>
</li>
<li>
<div class="form-group" id="success-form">
  <button class="btn btn-primary ang_login_btn btn-block " [disabled]="signUp.invalid">Register</button>
</div>
</li>
<span class="help-block">{{ error_status  }}</span>
</form>

  

子component.ts

@Output() addNewUser: EventEmitter<any> = new EventEmitter();


  // Signup Form Submission
onSignup(){
this.submitted = true
this.route.params.subscribe( params => this.token_key = params );

this.user.firstname = this.signUpForm.value.firstName;
this.user.lastname = this.signUpForm.value.lastName;
this.user.username = this.signUpForm.value.username;
this.user.email = this.signUpForm.value.email;
this.user.role = this.signUpForm.value.role;

this.user_obj["first_name"] = this.user.firstname;
this.user_obj["last_name"] = this.user.lastname;
this.user_obj["email"] = this.user.email;
this.user_obj["username"] = this.user.email;  
this.signup_obj['user'] = this.user_obj;
this.signup_obj['role'] = this.user.role;

//signup service call
this.service.getSignUp(this.signup_obj).subscribe((response)=>{
  console.log(response)
  this.addNewUser.emit(response);
  this.signUpForm.resetForm();

  *//This is the code i want to change*
  $('#success-form').on('click', function(e){
    console.log("success");
    // $('#addUserModal').modal('hide');
    $('#myModal').modal('show');
    e.preventDefault();
  });
},
err => {
  this.error_status = err.error.msg
  console.log(this.error_status)
} 
)
};