代码之家 › 专栏 › 技术社区 › Adam Murray

angular cli在modal中打开组件

modal-dialog angular

Adam Murray · 技术社区 · 7 年前

Angular新手,我需要在模式弹出窗口中打开详细视图。除了以下问题的答案外,我在这个问题上没有找到太多的答案,因此这可能是一个简单的问题,我只是在仔细考虑一下。我没有使用ngxBootstrap。

问题: Load self in modal - Angular component

我已将我们的仪表板(sar仪表板)配置为在用户使用以下技术单击子组件(sar列表)中的元素时显示模式: http://www.agiratech.com/angular-typescript-modal-window/

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

我已经在仪表板HTML中声明了模态,并在子组件(sar列表)的选择器中包含了事件

<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列表)声明输出事件 @Output() openModal = new EventEmitter<number>();

父级(sar仪表板)捕获它以设置显示:block以便显示模态。这一切都很好 openModal(id: number) { this.display = 'block'; }

我现在需要的是获取注入的“id:number”,这样我就可以调用服务并根据id加载详细信息。我创建了一个新组件(sar quickview),并将选择器添加到模式中,无论它在click事件之前如何呈现,因此永远不会加载任何数据。

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

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

注意:这是我的第一篇帖子,所以我还在学习格式。

1 回复 | 直到 7 年前

Adam Murray 7 年前

已解决! 我能够利用@StephenPaul的解决方案来解决以下问题 Angular 2.0 and Modal Dialog 哦!

模态组件选择器按预期放置在父级中,但我介绍了#模态,它允许父级调用模态组件的pulic Show()/Hide()函数。因此,我刚刚传入了选定的id,瞧,数据加载和显示。

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

模态组件。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);
      });
  }

}