Angular 2 - 制作可重用的弹出窗口答案

【问题标题】：Angular 2 - Making reusable popupsAngular 2 - 制作可重用的弹出窗口
【发布时间】：2017-10-04 12:43:35
【问题描述】：

仍然是 Angular 2 的新手，并试图弄清楚如何最好地制作可重复使用的弹出窗口。我从关于 SO 的另一个问题中发现了这个非常方便的弹出窗口 (Angular 2.0 and Modal Dialog)

@Component({
  selector: 'app-component',
  template: `
  <button type="button" (click)="modal.show()">test</button>
  <app-modal>
    <div class="app-modal-header">
      header
    </div>
    <div class="app-modal-body">
      Whatever content you like, form fields, anything
    </div>
    <div class="app-modal-footer">
      <button type="button" class="btn btn-default" (click)="modal.hide()">Close</button>
      <button type="button" class="btn btn-primary">Save changes</button>
    </div>
  </app-modal>
  `
})
export class AppComponent {

  @ViewChild(ModalComponent)
  public readonly modal: ModalComponent;
}

@Component({
  selector: 'app-modal',
  template: `
  <div (click)="onContainerClicked($event)" class="modal fade" tabindex="-1" [ngClass]="{'in': visibleAnimate}"
       [ngStyle]="{'display': visible ? 'block' : 'none', 'opacity': visibleAnimate ? 1 : 0}">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <ng-content select=".app-modal-header"></ng-content>
        </div>
        <div class="modal-body">
          <ng-content select=".app-modal-body"></ng-content>
        </div>
        <div class="modal-footer">
          <ng-content select=".app-modal-footer"></ng-content>
        </div>
      </div>
    </div>
  </div>
  `
})
export class ModalComponent {

  public visible = false;
  private visibleAnimate = false;

  public show(): void {
    this.visible = true;
    setTimeout(() => this.visibleAnimate = true, 100);
  }

  public hide(): void {
    this.visibleAnimate = false;
    setTimeout(() => this.visible = false, 300);
  }

  public onContainerClicked(event: MouseEvent): void {
    if ((<HTMLElement>event.target).classList.contains('modal')) {
      this.hide();
    }
  }
}

我正在制作一个贯穿多个弹出窗口的应用程序。我很想保留这个简单的 html 模板，并根据我想要的弹出窗口插入不同的子组件。即替换弹出的div；

<div class="modal-dialog">
  <div class="modal-content">
    <my-custom-component></my-custom-component>
  </div>
</div>

有没有办法“传入”my-custom-component？还是我必须为我想要的每种弹出窗口复制弹出 html？

【问题讨论】：

标签： angular

【解决方案1】：

这看起来是使用 Angular 2 嵌入的完美案例。嵌入 - 可怕的词，但实际上它非常简单。

在您的模态组件模板中，您应该只输入：

<ng-conten></ng-content>

之后，您将能够在其他模板中使用您的模态组件，如下所示：

<app-modal>
  <-- your custom content -->
  <div></div>
</app-modal>

如果你想要特定的部分，你可以放置几个ng-content标签，并将select属性设置为一些值：

<ng-conten select=[header]></ng-content>
<ng-conten select=[body]></ng-content>
<ng-conten select=[footer]></ng-content>

并在使用场所：

<app-modal>
 <-- your custom content -->
 <div class="someClass" header></div>
 <div class="maybeSomeOtherClass" body></div>
 <div footer></div>
</app-modal>

您可以在this great article找到更多详细信息。

【讨论】：

猜我的代码示例已经内置了这个，只是不知道它存在/它是什么！谢谢:)

【解决方案2】：

您可以创建一个使用 ngSwitch 的组件/模板，并传递该组件决定加载哪个模板所需的内容，在此示例中只是一个要关闭的字符串，但您可以传递您可能需要触发的任何数据子模板的行为。所以你会像这样在 html 中调用你的组件：

<my-custom-component [templateToUse]='template2'></my-custom-component>

然后在组件的代码中为该属性添加一个@Input，我假设您知道如何执行此操作。然后在您放入 ngSwitch 语句的组件的模板中。

以我的角度文档为例，因为我还没有在 ng2 中使用 ngSwitch，但在 angular 1.x 中使用了。请参阅此处了解更多信息。 https://angular.io/docs/ts/latest/api/common/index/NgSwitch-directive.html 我保留了容器/某些元素的名称，但我相信它们只是在那里显示嵌套结构。

(我的自定义组件.html)

<container-element [ngSwitch]="templateToUse">
   <some-element *ngSwitchCase="template1">Template could be another component/directive</some-element>
    <some-element *ngSwitchCase="template2">I chose this template</some-element>
</container-element>

【讨论】：