Home / Questions / 96465
Accepted
Elberth Agreda
Asked: 2020-08-22 17:34:52 +0800 CST 2020-08-22 17:34:52 +0800 CST

如何在Angular 4中将参数从组件传递到模态？

  • 772

我正在编辑列表中的记录，单击它会以模式打开此记录，其中包含要编辑的用户信息，到目前为止一切都很好。

我的缺点是在模态中我正在加载一个依赖于所选用户的服务，我在OnInit模态中执行此功能，但是由于当我打开模态时模态在我的主要组件中加载，该服务是空的，因为它是在加载时执行的组件主要而不是加载模式时。

当我打开模式而不是加载组件时，如何让我的函数运行？

注意：模式在一个组件中，而我的记录列表在另一个组件中

主模板：

 <app-modal modalId="editUser" modalSize="modal-lg" modalTitle="Editar Usuario - {{user.userId}}" modalIcon="ion-ios-person-outline">
  <app-edit-user [user]="user"></app-edit-user>
</app-modal>

主要组件（从这里我称之为我的模态）：

 onRowSelect(event) {
   this.newUser = false;
   this.user = this.cloneUser(event.data);
   $("#editUser").modal();
  }

组件模态

  getParameters(user){
    console.log(user);
    this._userService.getParameter(user).subscribe(
      response => {
      this.userParameter = response.pagedResult.resultado;
      console.log(this.userParameter);
    }, 
      error => {
        console.log(<any>error);
      }
    );
  }

 // Desde aqui llamo la función pero como se ejecuta al cargar el componente los datos siempre vienen vacios

  ngOnInit() {
    console.log(this.user.userId);
    this.getParameters(this.user.userId);
  }
angular2-template

1 Answers

  1. Best Answer

    这个想法是在你的组件中使用 ngOnChanges 作为编辑用户，在你的列表组件中它收集编辑用户组件，并在调用它之前将数据传递给它。

    模态组件

    @Component({
  selector: 'app-modal',
  template: `
    <div [hidden]="hidden">
      <ng-content></ng-content>
    </div>
  `
})
export class ModalComponent {

  hidden = true;

  open() {
    this.hidden = false;
  }

  close() {
    this.hidden = true;
  }

}

    编辑用户组件

    @Component({
  selector: 'app-edit-user',
  template: `
    <form (onSubmit)="onSubmit() [hidden]="!user || !userParameter">
      <!-- tus campos... -->
    </form>
  `
})
export class EditUserComponent implements OnChanges {

  @Input() user = null;
  userParameter = null;
  @Output() onResult = new EventEmitter<any>(null);

  constructor(private userService: UserService)

  ngOnChanges(changes) {
    if (changes['user']) {
      this.userService.getParameter(changes.user.currentValue).subscribe(
        userParameter => this.userParameter = userParameter
      );
    }
  }

  onSubmit() {
    // ...
    const user = ...;
    // ...
    this.userService.updat(user).subscribe(
      (userEdited) => this.onResult.emmit({ hasErrors: true, user: userEdited }),
      (err) => this.onResult.emmit({ hasErrors: true, user: user })
    );
  }

}

    用户组件

    @Component({
  selector: 'app-users',
  template: `
    <ul>
      <li *ngFor="let user of users" (click)="onClickUser(user)">
        #{{ user.id }} - {{ user.name }} {{ user.lastname }}
      </li>
    </ul>
    <app-modal>
      <app-edit-user (onResult)="onUserEdited($event)"></app-edit-user>
    </app-modal>
  `
})
export class UsersComponent implements OnInit {

  users = [];
  @ViewChild(ModalComponent) modalComponent: ModalComponent;
  @ViewChild(EditUserComponent) editUserComponent: EditUserComponent;

  constructor(private userService: UserService) {}

  ngOnInit() {
    this.userService.getAll().subscribe(users => this.users = users);
  }

  onClickUser(user) {
    this.editUserComponent.user = user;
    this.modalComponent.open();
  }

  onUserEdited($event) {
    if ($event.hasErrors) {
      console.error(`Error al editar el usuario`);
    } else {
      const index = this.users.findIndex(user => user.id === $event.user.id);
      if (index > -1) {
        this.users[index] = $event.user;
      }
    }
    this.modalComponent.close();
  }

}
    • 1