重用Angular 5中的html内容 [英] to reuse html content in angular 5

问题描述

在开始这个问题之前，我先说明我是新来的，所以请耐心等待. 我会尽力解释自己. 在引导程序中，我可以通过以下方式生成模态:

Before starting this question, I clarify that I am new so please be patient. I will try to explain myself. In bootstrap I can generate modals in the following way:

[modal.component.html]

    <!--<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>-->
    <!-- Modal -->
    <div id="myModal" class="modal fade" role="dialog">
      <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Modal Header</h4>
          </div>
          <div class="modal-body">
            <p>Some text in the modal.</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>

      </div>
    </div>

我正在尝试创建一个service，以便可以在需要它的地方调用以前的模式.

I am trying to create a service so that I can invoke the previous modal where it requires it.

我想在我的service文件中有类似的内容.

I imagine something like that inside my service file.

generatePopup(){
  $('#myModal').modal('show');
}

然后，每次您调用service(generatePopup)时，都会出现模态.我不确定如何执行此操作，如果您能指导我，我将不胜感激. 我想做的是保存代码，并且在任何组件中我都不必在每个视图中保留html代码，但是我确实调用了generatePopup，它调用了我的模式.

then every time you call the service (generatePopup) the modal should appear. I'm not sure how to do this, if you can guide me I would be very grateful. what I'm trying to do is save code and in any component I do not have to keep the html code in every view, but I do call generatePopup and it invokes me to the modal.

谢谢

推荐答案

这就是我的方法，请在下面链接到stackblitz.

This is how I would do it, link below to stackblitz.

https://stackblitz.com/edit/ngx-bootstrap-fh92s3

modal.service.ts

import {Injectable} from '@angular/core';
import {ModalModel} from './modal.model';
import {Subject} from "rxjs/Subject";

declare let $: any;

@Injectable()
export class ModalService {

  modalData = new Subject<ModalModel>();

  modalDataEvent = this.modalData.asObservable();

  open(modalData: ModalModel) {

    this.modalData.next(modalData);

    $('#myModal').modal('show');
  }

}

modal.component.ts

import { Component } from '@angular/core';
import { ModalService } from './modal.service';
import {ModalModel} from './modal.model';

declare let $: any;

@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html',
  styleUrls: [ './modal.component.css' ]
})
export class ModalComponent  {

  modalData: ModalModel;

  constructor(private modalService: ModalService) {
    this.modalService.modalDataEvent.subscribe((data) => {
      this.modalData = data;
    })
  }

}

从任何组件调用此服务

import { Component } from '@angular/core';
import { ModalService } from '../modal/modal.service';
import { ModalModel } from '../modal/modal.model';


declare let $: any;

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: [ './home.component.css' ]
})
export class HomeComponent  {

  modelData = new ModalModel();

  constructor(private modalService: ModalService) {

  }

  open() {
    this.modelData.header = 'This is my dynamic HEADER from Home component';
    this.modelData.body = 'This is my dynamic BODY from Home component';
    this.modelData.footer = 'This is my dynamic footer from Home component';
    this.modalService.open(this.modelData);
  }
}

希望有帮助，如果您需要任何解释，请告诉我.

Hope it helps, let me know if you need any explanations.

编辑

如果有人正在寻找ngx-bootstrap版本(不使用jQuery). 这是一个Stackblitz链接.

If someone is looking for ngx-bootstrap version of this, (without using jQuery). Here is a Stackblitz link.

https://stackblitz.com/edit/angular-ngx-bootstrap-modal

这篇关于重用Angular 5中的html内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！