首页 文章

Angular 2 - 制作可重复使用的弹出窗口

提问于
浏览 次
2

仍然是角度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模板，并根据我想要的弹出窗口插入不同的子组件 . 即取代popup div;

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

有没有办法'传入'我的自定义组件？或者我是否必须为我想要的每种类型的弹出窗口复制弹出式html？

angular

2 回答

  • 4

    这看起来像是使用Angular 2 transclusion的完美案例 . 翻译 - 可怕的词，但实际上它很简单 .

    在你的模态组件模板中，你应该放：

    <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中找到更多详细信息 .

    回复于
  • 0

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

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

    然后在组件的代码中有一个@Input用于该属性，我假设你知道如何做到这一点 . 然后在您放入ngSwitch语句的组件的模板中 .

    以角度文档为例，因为我还没有在ng2中使用ngSwitch，但是在角度1.x中 . 有关详细信息，请参见此处https://angular.io/docs/ts/latest/api/common/index/NgSwitch-directive.html我'm preserving the container/some-element names, but they'就在那里我相信显示嵌套结构 .

    （我的定制，component.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>
    回复于

相关问题