如何使用 Angular 将函数从一个组件传递到另一个组件？

Question

我的 driver-list.component.html 文件中有以下内容：

<button class="btn btn-outline-primary mr-2" (click)="open('focusFirst')">
  <div>Open confirm modal</div>
  <div class="text-dark" aria-hidden="true"><small>&times; button will be focused</small></div>
</button>

这是我的 driver-list.component.ts

已更新 driver-list.component.html

    @Component({
  selector: 'app-driver-list',
  templateUrl: './driver-list.component.html',
  styleUrls: ['./driver-list.component.css']
})
export class DriverListComponent implements OnInit {

  ...

@Component({
  selector: 'ngbd-modal-confirm',
  template: `
    <div class="modal-header">
      <h4 class="modal-title" id="modal-title">Profile deletion</h4>
      <button type="button" class="close" aria-describedby="modal-title" (click)="modal.dismiss('Cross click')">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      <p><strong>Are you sure you want to delete <span class="text-primary">"John Doe"</span> profile?</strong></p>
      <p>All information associated to this user profile will be permanently deleted.
        <span class="text-danger">This operation can not be undone.</span>
      </p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-outline-secondary" (click)="modal.dismiss('cancel click')">Cancel</button>
      <button type="button" class="btn btn-danger" (click)="modal.close('Ok click')">Ok</button>
    </div>
  `
})
export class NgbdModalConfirm {
  constructor(public modal: NgbActiveModal) {}
}

const MODALS: {[name: string]: Type<any>} = {
  focusFirst: NgbdModalConfirm
};

@Directive({
  selector: "[openClick]",
})
export class NgbdModalFocus {
  @Input() name!: string;
  withAutofocus = `<button type="button" ngbAutofocus class="btn btn-danger"
      (click)="modal.close('Ok click')">Ok</button>`;

  constructor(private _modalService: NgbModal) {}

  @HostListener("click", ["$event"])
  open(name: string) {
    this._modalService.open(MODALS[name]);
  }
}

所以现在模式出现了，但它完全是空的。我意识到我也必须添加到其他两个组件中。它们内部有模板来格式化模态消息。我也应该在那里使用指令吗？

Answer 1

这就是指令的用途！

import { Directive, Input, HostListener } from "@angular/core";

@Directive({
  selector: "[openClick]",
})
export class open {
  @Input() name: string;

  constructor(
    private _modalService: NgbModal
  ) {}

  @HostListener("click", ["$event"])
  open(event) {
     this._modalService.open(MODALS[this.name]);
   }
}

然后在你的按钮上，把

<button class="btn btn-outline-primary mr-2" openClick name="focusFirst">
  <div>Open confirm modal</div>
  <div class="text-dark" aria-hidden="true"><small>&times; button will be focused</small></div>
</button>

<button class="btn btn-outline-primary" openClick name="autoFocus">
  <div>Open confirm modal with `ngbAutofocus`</div>
  <div class="text-dark" aria-hidden="true"><small>Ok button will be focused</small></div>
</button>

这是关于指令的文档：https://angular.io/api/core/Directive

将指令放在一个单独的地方，并将它们导入到所需的模块中。

如何使用 Angular 将函数从一个组件传递到另一个组件？

How to pass a function from one component to an other using Angular?

typescript

bootstrap-modal

angular