Question

我正在使用模态对话框开发Angular 2 + TypeScript应用程序。

我有主要的模态组件：

<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编译成一个视图？这样做的最佳方法是什么？我应该使用与模板表达不同的东西吗？

Answer 1

model.ts单独的组合

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

}

并且父组件传递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

您可以使用ng-content。如果您熟悉角度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

如何动态组合（编译）单独组件Angular 2的模态对话框？

2 个答案: