模态角cli开放分量 [英] angular cli open component in modal

问题描述

Angular的新手，我需要在模式弹出窗口中打开详细视图.除了以下问题的答案外，我在该主题上没有发现太多内容，因此，这可能只是我要解决的简单问题.我没有使用ngxBootstrap.

New to Angular and I have the need to open a detail view in a modal popup. I have not found much on the subject except for the answer to the question below therefore it may be a simple matter I am just over looking. I am not using ngxBootstrap.

问题:将自身加载到模式-Angular组件

我已经配置了我们的仪表板(sar-dashboard)，以使用以下技术在用户单击子组件(sar-list)中的元素时显示模式:

I have configured our Dashboard (sar-dashboard) to display a modal when the user clicks an element from a child component (sar-list) using the techniques found here: http://www.agiratech.com/angular-typescript-modal-window/

并使用如下所示的EventEmitter: https://angular.io/guide/component-interaction#parent-listens-for-child-event

and using the EventEmitter as shown here: https://angular.io/guide/component-interaction#parent-listens-for-child-event

我已经在仪表板HTML中声明了模式，并将事件包含在子组件(sar-list)的选择器中

I have declared the modal in the dashboard HTML and included the event in the selector for the child component (sar-list)

< app-sar-list(openModal)="openModal($ event)"></app-sar-list>
...
< div class ="backdrop" [ngStyle] ="{'display':display}"></div>< div class ="modal" tabindex =-1" role ="dialog" [ngStyle] ="{'display':display}">

子级(sar-list)声明输出事件 @Output()openModal =新的EventEmitter< number>();

The child (sar-list) declares the output event @Output() openModal = new EventEmitter<number>();

和父级(sar-dashboard)捕获它以设置display:块，以便模态显示.这一切都很好 openModal(id:number){this.display ='block';}

and the parent (sar-dashboard) captures it to set the display: block so modal will show. This all works fine openModal(id: number) { this.display = 'block'; }

我现在需要的是获取注入的"id:number"，以便我可以调用服务并根据id加载详细信息.我创建了一个新组件(sar-quickview)，并将选择器添加到模式中，但是选择器会在click事件之前首先呈现，因此不会加载任何数据.

What I need now is to grab the injected "id: number" so I can call the service and load details based on the id. I created a new component (sar-quickview) and add the selector to the modal however it renders first before the click event and therefore no data is ever loaded.

< div class ="modal-body">< app-sar-quickview [id] ="sarId"></app-sar-quickview></div>

一旦根据用户选择使模态可见，如何从数据库中加载详细信息?

How to load the detail from database once the modal is made visible based on user choice?

注意:这是我的第一篇文章，所以我仍在学习格式.

Note: this is my first post so I'm learning the formatting still.

推荐答案

已解决！我能够将@StephenPaul的解决方案用于以下问题 Angular 2.0和Modal Dialog ！

Solved! I was able to utilize the solution from @StephenPaul to the following question Angular 2.0 and Modal Dialog!

模态组件选择器按预期放置在父组件中，但是我被介绍给#modal，它允许父组件调用模态组件的pulic Show()/Hide()函数.因此，我只是传入了选定的ID，因此会加载并显示数据.

The modal component selector is placed in the parent as expected but I was introduced to the #modal which allowed the parent to invoke the pulic Show()/Hide() functions of the modal component. Therefore I just passed in the selected id and voila data loads and displays.

<ul class="list-group">
    <div *ngFor="let sar of sars">
        <div class="block">
            <a class="overlay" routerLink="/sar-detail/{{sar.sarSid}}" title="{{sar.title}} Details"></a>
            <div class="inner">                
                {{sar.sarSid}} via {{sar.title}}
                <a (click)="modal1.show(sar.sarSid)" 
                    title="SAR Quick View" 
                    style="cursor: pointer">
                    <span class="glyphicon glyphicon-eye-open pull-right" aria-hidden="true"></span>
                </a>               
            </div>
        </div>
    </div>
</ul>
<app-sar-quickview #modal1>
    <div class="app-modal-header">         
        <button type="button" class="close" aria-label="Close" (click)="modal1.hide()"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> Suspicious Activity Report Quick View</h4>
    </div>
    <div class="app-modal-body">
        <!-- Whatever content you like, form fields, anything
        <input type="text"> -->
    </div>
    <div class="app-modal-footer">
        <button type="button" class="btn btn-default" (click)="modal1.hide()">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
    </div>
</app-sar-quickview>

和模态组件标记

<div (click)="onContainerClicked($event)" class="modal fade" tabindex="-1" [ngClass]="{'in': visibleAnimate}"
  [ngStyle]="{'display': visible ? 'block' : 'none', 'opacity': visibleAnimate ? 1 : 0}">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <ng-content select=".app-modal-header"></ng-content>
      </div>
      <div class="modal-body">
        <ng-content select=".app-modal-body"></ng-content>

modal component.ts

modal component.ts

export class SarQuickviewComponent implements OnInit {
  sar: SAR;
  public visible = false;
  private visibleAnimate = false;

  constructor(private sarService: SARService, private route: ActivatedRoute, private location: Location) { }

  ngOnInit() {
    // this.getSarDetail();
  }

  public show(id: number): void {

    // load sar data before making it visible
    console.log('selected id: ' + id);
    this.getSarDetail(id);

    // now show the modal
    this.visible = true;
    setTimeout(() => this.visibleAnimate = true, 100);
  }

  public hide(): void {
    this.visibleAnimate = false;
    setTimeout(() => this.visible = false, 300);
  }

  public onContainerClicked(event: MouseEvent): void {
    if ((<HTMLElement>event.target).classList.contains('modal')) {
      this.hide();
    }
  }

  getSarDetail(id: number): void {
    // invoke service to fetch sar details based on id
    this.sarService.getSARDetailForId(id)
      .subscribe(sar => {
        this.sar = sar;
        console.log(this.sar);
      });
  }

}

这篇关于模态角cli开放分量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！