javascript - 通过引用以 Angular 2 插入子组件

Question

我正在创建 Angular 二的自定义模态组件。它具有我用 @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'
}

到目前为止，还不错。

我想要的是模态内容是一个 Angular 组件而不是字符串。因此，在 CustomModalInstance 中，我可以导入一个在某处定义的 RandomComponent 并将其显示在 CustomModal 中，当前那里有一个字符串。

是否可以实现？

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

Answer 1

同样的事情可以通过 ng-content 指令使用 Projection/Transclusion 来处理。

自定义模态.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
        });
    }
}

自定义模态实例.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