角度2の参照で子コンポーネントを挿入します。

Question

私は角度2のカスタムモーダルコンポーネントを作成しています。私は@Inputで飾ったmodalTitleとmodalContentの文字列を持っています。今

import { Component, Input } from '@angular/core'; 
import { MdDialog, MdDialogRef } from '@angular/material'; 

// import {RandomComponent} from './somewhere' 

@Component({ 
    selector: 'custom-modal', 
    template: ` 
<md-card [ngClass]="'dialog-card'"> 
    <md-card-title> 

    {{modalTitle}} 

    </md-card-title> 
    <md-card-content> 

    {{modalContent}} 

    <br/> 
    </md-card-content> 
</md-card> 
` 
}) 

export class CustomModal { 
    fullName: string = ''; 

    @Input() modalTitle: string; 
    @Input() modalContent: string; 

    constructor(public dialogRef: MdDialogRef <TmModal>) { 
     super(); 
     this.modalTitle = 'modal' 
     this.modalContent = "I'm some sample content." 

    } 

    ngOnInit() {} 

    confirm() { 
     this.dialogRef.close({ 
      success: true, 
      data: {} 
     }); 
    } 

    cancel() { 
     this.dialogRef.close({ 
      success: false 
     }); 
    } 
} 

次のように、このコンポーネントは、他で消費されている：

import { Component, Input } from '@angular/core'; 
import { MdDialog, MdDialogRef } from '@angular/material'; 

// import {RandomComponent} from './somewhere' 


@Component({ 
    selector: 'custom-modal-instance', 
    template: ` 
    <custom-modal 
     [modalTitle]="modalTitleHere" 
     [modalContent]="modalContentHere" 
    > 
    </custom-modal> 
    ` 
}) 

export class CustomModalInstance { 
    modalTitleHere = 'Custom modal title' 
    modalContentHere = 'Custom modal text stuff' 
} 

これまでのところ、とても良いです。

私が望むのは、モーダルコンテンツが文字列ではなく角形要素であることです。だから、CustomModalInstanceでは、どこかで定義されたRandomComponentをインポートして、CustomModalの中に表示させることができます。現在は文字列があります。

達成することは可能ですか？

ご協力いただければ幸いです。ありがとう。

Answer 1

ng-contentディレクティブを使用してProjection/Transclusionを使用して同じことを処理できます。

カスタムmodal.component.ts

import { Component, Input } from '@angular/core'; 
import { MdDialog, MdDialogRef } from '@angular/material'; 

@Component({ 
    selector: 'custom-modal', 
    template: ` 
<md-card [ngClass]="'dialog-card'"> 
    <md-card-title> 

    {{modalTitle}} 

    </md-card-title> 
    <md-card-content> 

     <ng-content></ng-content> 


    <br/> 
    </md-card-content> 
</md-card> 
` 
}) 

export class CustomModal { 
    fullName: string = ''; 

    @Input() modalTitle: string; 
    @Input() modalContent: string; 

    constructor(public dialogRef: MdDialogRef <TmModal>) { 
     super(); 
     this.modalTitle = 'modal' 
     this.modalContent = "I'm some sample content." 

    } 

    ngOnInit() {} 

    confirm() { 
     this.dialogRef.close({ 
      success: true, 
      data: {} 
     }); 
    } 

    cancel() { 
     this.dialogRef.close({ 
      success: false 
     }); 
    } 
} 

カスタムモーダルinstance.component.ts

import { Component, Input } from '@angular/core'; 
    import { MdDialog, MdDialogRef } from '@angular/material'; 

    import {RandomComponent} from './somewhere' 


    @Component({ 
     selector: 'custom-modal-instance', 
     template: ` 
     <custom-modal 
      [modalTitle]="modalTitleHere" 
      [modalContent]="modalContentHere" 
     > 
     <h5> Send this content to the custom modal component </h5> 
     <random></random> 
     </custom-modal> 
     ` 
    }) 

    export class CustomModalInstance { 
     modalTitleHere = 'Custom modal title' 
     modalContentHere = 'Custom modal text stuff' 
    } 

ここでは、同じの例えばplunkerリンクです：http://plnkr.co/edit/4Ajw6j?p=preview可能