Question

仍然是角度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>

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

Answer 1

这看起来像是使用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中找到更详细的信息。

Answer 2

您可以创建一个使用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我保留了容器/某些元素的名称，但它们只是在那里，我相信它会显示嵌套结构。

（我的定制-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>

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

2 个答案: