Question

我正在以角度2创建自定义模态组件。它有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指令使用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'
    }

以下是一个相关链接：http://plnkr.co/edit/4Ajw6j?p=preview

通过角度2中的引用插入子组件

1 个答案: