模态中的角度cli打开组件

Question

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

问题：Load self in modal - Angular component

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

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

我已经在仪表板 HTML 中声明了模式，并将事件包含在子组件（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 = new EventEmitter<number>();

并且父级（sar-dashboard）捕获它以设置 display: 块，因此模态将显示。这一切都很好 openModal(id: number) { this.display = 'block'; }

我现在需要的是获取注入的“id: number”，这样我就可以调用服务并根据 id 加载详细信息。我创建了一个新组件（sar-quickview）并将选择器添加到模式中，但是它在单击事件之前首先呈现，因此没有加载任何数据。

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

如何根据用户选择使模态显示可见后从数据库中加载详细信息？

注意：这是我的第一篇文章，所以我还在学习格式。

Answer 1

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

模态组件选择器按预期放置在父级中，但我被介绍给#modal，它允许父级调用模态组件的公共 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);
      });
  }

}