Question

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

<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>

Answer 1

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

Answer 2

我找到了解决方案。请看我的Plunk： JS array sort with regex

我必须在我的模态视图中注入一个模板，如下所示：

[...]
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}`);
    });
  }

感谢http://plnkr.co/edit/BNlsp2bGfWmae4K4ZTtT?p=preview的帮助。

Answer 3

您需要为模态创建单独的组件。

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

<强> 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％正确，可能我做了一些拼写错误，但我只是想试着用一个简单的例子来解释它是如何工作的。

我希望你能理解。如果不是，请不要犹豫，询问上述例子中是否有不明确的内容。

带有模板内容的Angular 2选择器

3 个答案: