在角度 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，并让它显示在CustomModal中，其中当前有一个字符串。

有可能实现吗？

任何帮助将不胜感激。谢谢。

Answer 1

同样可以通过ng-content指令使用投影/嵌入来处理。

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'
    }

这是一个相同的链接：http://plnkr.co/edit/4Ajw6j?p=preview