0

我正在使用带有@ng-bootstrap 的Angular 2。我有一个这样的模态对话框：

<template #editDialog let-c="close" let-d="dismiss">
    <div class="modal-header">
        <button type="button" class="close" aria-label="Close" (click)="d()">
      <span aria-hidden="true">&times;</span>
    </button>
        <h4 class="modal-title">MyHeader</h4>
    </div>
    <div class="modal-body">
        <div class="form">
            <label class="form-label" for="myinput">Caption: </label>
            <input class="form-control" type="text" id="myinput" [ngModel]="selected.Caption" />
        </div>
    </div>
    <div class="modal-footer">
        <button class="btn btn-default" (click)="c('true')">OK</button>
        <button class="btn btn-default" (click)="c('false')">Cancel</button>
    </div>
</template>

我想重用模态对话框的框架，只想更改组件中的主体。它应该看起来像这样：

<my-modal>
    <div class="form">
        <label class="form-label" for="myinput">Caption: </label>
        <input class="form-control" type="text" id="myinput" [ngModel]="selected.Caption" />
    </div>
</my-modal>

谁能告诉我如何实现这一点，尤其是模型（selected.Caption）？我已经尝试了很多，但没有得到它的工作。

更新

清除：我想注入一些 HTML 标签，所以我得到了类似的东西：

<div class="modal-header">
    <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
    <h4 class="modal-title">{{title}}</h4>
</div>
<div class="modal-body">
    <!-- MY CUSTOM HTML COMES HERE! -->
    <!-- MAYBE WITH <ng-content></ng-content> -->
</div>
<div class="modal-footer">
    <button class="btn btn-default" (click)="activeModal.close(true)">OK</button>
    <button class="btn btn-default" ((click)="activeModal.close(false)">Abbrechen</button>
</div>

@pkozlowski.opensource 的答案基本上适用于打开和关闭模式。但我没有把我的身体放进去：

<my-modal>
    <div class="form">
        <label class="form-label" for="myinput">Caption: </label>
        <input class="form-control" type="text" id="myinput" [ngModel]="selected.Caption" />
    </div>
</my-modal>
4

3 回答 3

2

来自https://ng-bootstrap.github.io库的模态实现使得重用内容变得非常容易 - 您需要做的就是创建一个组件并将其用作内容。在您的特定情况下，您可以像这样创建一个组件：

@Component({
  selector: 'ngbd-modal-content',
  template: `
    <div class="modal-header">
      <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
        <span aria-hidden="true">&times;</span>
      </button>
      <h4 class="modal-title">My Header</h4>
    </div>
    <div class="modal-body">
      <div class="form">
        <label class="form-label" for="myinput">Caption: </label>
        <input class="form-control" type="text" id="myinput" [value]="selectedCaption" />
      </div>
    </div>
    <div class="modal-footer">
      <button class="btn btn-default" (click)="activeModal.close(true)">OK</button>
      <button class="btn btn-default" (click)="activeModal.close(false)">Cancel</button>
    </div>
  `
})
export class EditDialogContent {
  @Input() selectedCaption;

  constructor(public activeModal: NgbActiveModal) {}
}

然后与@Input这个组件交互：modalRef.componentInstance.selectedCaption = 'Some caption';. 这是一个活生生的例子：http ://plnkr.co/edit/kRvBeFbvFR2ORInZAij7?p=preview

于 2016-11-02T15:14:20.937 回答
1

我找到了一个解决方案，它是如何工作的。请看我的 Plunk： http ://plnkr.co/edit/BNlsp2bGfWmae4K4ZTtT?p=preview

我必须将模板注入到我的模态视图中，如下所示：

[...]
export class EditDialogContent implements OnInit {
    template: TemplateRef<any>;

    constructor(public activeModal: NgbActiveModal) {}
}

对应的HTML是：

<div class="modal-header">
    <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
        <span aria-hidden="true">&times;</span>
      </button>
    <h4 class="modal-title">My Header</h4>
</div>
<div class="modal-body">
    <!-- THIS IS IMPORTANT! -->
    <template [ngTemplateOutlet]="template"></template>
</div>
<div class="modal-footer">
    <button class="btn btn-default" (click)="activeModal.close(true)">OK</button>
    <button class="btn btn-default" (click)="activeModal.close(false)">Cancel</button>
</div>

正文模板 HTML 是：

<p>You can pass an existing component as content of the modal window. In this case remember to add content component as an <code>entryComponents</code> section of your <code>NgModule</code>.</p>

<template #bodyTemplate>
  <div class="form">
    <label class="form-label" for="myinput">Caption: </label>
    <input class="form-control" type="text" id="myinput" [(ngModel)]="selected.Caption" />
  </div>
</template>

<button class="btn btn-lg btn-outline-primary" (click)="open(bodyTemplate)">Launch demo modal</button>

要打开对话框，只需在后面的组件中执行以下操作：

open(bodyTemplate) {
    const modalRef = this.modalService.open(EditDialogContent);
    modalRef.componentInstance.template = bodyTemplate;
    modalRef.result.then((closeResult) => {
      console.log(`Closed with: ${closeResult}`);
    });
  }

感谢pkozlowski-opensource的帮助。

于 2016-11-03T09:39:20.403 回答
0

您需要为模式制作单独的组件。

如果你想实现这一点，你只需改变模态的主体，就像这样。

modal.component.ts

@Component({
  selector: 'modal',
  templateUrl: './modal.component.html',
  styleUrls: ['./modal.component.css']
})
export class AppComponent {
      @Input() title: string;
}

modal.component.html

<modal let-c="close" let-d="dismiss">
    <div class="modal-header">
        <button type="button" class="close" aria-label="Close" (click)="d()">
      <span aria-hidden="true">&times;</span>
    </button>
        <h4 class="modal-title">{{ title }}</h4>
    </div>

    <div class="modal-body">
      <ng-content select="body-of-modal"></ng-content>
    </div>

    <div class="modal-footer">
    <ng-content select="footer-of-modal"></ng-content>
    </div>
</modal>

这里的重要部分是<ng-content>

那是如何工作的？

现在，如果您想重用您的模态组件，则在您的示例之后的其他一些组件将是这样的：

你的例子：

<modal #editDialog title="My Header" let-c="close" let-d="dismiss">
    <body-of-modal>
        <div class="form">
            <label class="form-label" for="myinput">Caption: </label>
            <input class="form-control" type="text" id="myinput" [ngModel]="selected.Caption" />
        </div>
    </body-of-modal>
     <footer-of-modal>
        <button class="btn btn-default" (click)="c('true')">OK</button>
        <button class="btn btn-default" (click)="c('false')">Cancel</button>
    </footer-of-modal>
</modal>

这个例子不是 100% 正确的，可能我打错了，但我只是想通过一个简单的例子向你解释它是如何工作的。

我希望你能明白。如果不是，请毫不犹豫地询问上面的示例是否有不清楚的地方。

于 2016-11-02T14:32:30.700 回答