個別のコンポーネントからモーダルダイアログを結合（コンパイル）する方法角2を動的に使用しますか？

Question

私はモーダルダイアログでAngular 2 + TypeScriptアプリを開発しています。

Iは主モーダル成分を有する：

<div class="modal"> 
    <div class="header">{{title}}</div> 
    <div class="body">{{body}}</div> 
    <div class="footer">{{footer}}</div> 
</div> 

{{title}} - テキスト、{{body}}と{{footer}} - HTMLの異なるコンポーネントからです。

とモーダルダイアログを開くには、ボタンを含むコンポーネントで

私はこれを持っている：

import { Component } from '@angular/core'; 
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; 

import { ModalComponent } from './modal.component'; 
import { BodyOneComponent } from './body/body-one.component'; 
import { FooterOneComponent } from './footer/footer-one.component'; 

@Component({ 
    selector: 'ac-parent', 
    templateUrl: './app/parent.component.html' 
}) 
export class ParentComponent { 
    constructor(private modalService: NgbModal) { } 

    openModal() { 
     const modalRef = this.modalService.open(ModalComponent); 
     modalRef.componentInstance.title = "Modal title"; 
     modalRef.componentInstance.body = "get html from BodyOneComponent somehow"; 
     modalRef.componentInstance.footer = "get html from FooterOneComponent somehow"; 
    } 
} 

だから、私の問題は、私は、他のコンポーネントからコンポーネントのHTMLコンテンツを取得する方法ですか？そして、それらのhtmlを1つのビューにコンパイルするにはどうすればいいですか？ これを実行する最良の方法は何ですか？私はテンプレート表現とは何か違うものを使うべきですか？

Answer 1

<div class="modal"> 
    <div class="header">{{title}}</div> 
    <div class="body">{{body}}</div> 
    <div class="footer">{{footer}}</div> 
</div> 

コンポーネントの別々のコンポが

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

@Component({ 
    selector: 'model-app', 
    template: '<h1>Model {{major}}</h1>', 
}) 
export class ModelComponent { 
@Input() major: number = 10; 
name = 'Angular'; 

} 

で、親コンポあなたはng-contentを使用することができますmajor

import { Component, Output } from '@angular/core'; 

@Component({ 
    selector: 'my-app', 
    template: '<h1>Hello {{name}}</h1> <model-app></model-app>', 
}) 
export class AppComponent { 

    name = 'Angular'; 
} 

Answer 2

の値を渡します。角度1に精通していれば、それは転置と似ています。あなたの主なモーダルで

は、あなたがこのような何か行うことができます - あなたの親コンポーネントに続いて

<div class="modal"> 
    <div class="header"> 
     <ng-content select="[m-header]"></ng-content> 
    </div> 
    <div class="body"> 
     <ng-content select="[m-body]"></ng-content> 
    </div> 
    <div class="footer"> 
     <ng-content select="[m-footer]"></ng-content> 
    </div> 
</div> 

を、あなたはこのようにそれを使用することができます： -

<h1>Hello {{name}}</h1> 
<modal> 
    <div m-header> 
     Your title here 
    </div> 
    <div m-body> 
     <p>Your html content here</p> 
    </div> 
</modal> 

は、私の中に詳細を参照してください。ここの記事https://scotch.io/tutorials/angular-2-transclusion-using-ng-content