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

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> 

有没有办法'传入'我的自定义组件？或者我将不得不复制弹出式HTML的每种类型的弹出我想要的？

Answer 1

这看起来像使用角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>