在 angular 2 中通過引用插入子組件

Question

我正在以角度二創建自定義模態組件。 它有modalTitle和modalContent字符串，我已經用@Input修飾了它們，所以它們可以被修改。

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定義的RandomComponent並將其顯示在CustomModal ，當前有一個字符串。

有可能實現嗎？

任何幫助將不勝感激。 謝謝。

Answer 1

同樣可以通過 ng-content 指令使用 Projection/Transclusion 來處理。

custom-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
        });
    }
}

custom-modal-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