Question

出于某种原因，我无法理解如何将数据传递到我的模态对话框。此外，在查看了Plunker之后，如果您认为有更简单的方法来执行模态，请告诉我。

Man，这个Angular2的东西也很难在Plunker上调试。有关如何调试它的任何提示？

如果我在PrimaryModalComponent的show函数上放置断点，我可以看到count 正在通过，this.count也正在设置中。在我的对话框显示时，我无法弄清楚为什么它没有被设置。可能#primary-modal位于alert.detail吗？

alert.detail.html

<div class="row" *ngFor="let alert of alerts">
    <div style="padding-left: 25px;" class="alert_links col-sm-12">
        <i class="fa fa-warning fa-red"></i>&nbsp;
        <a href="#" *ngIf="alert.alert_type=='critical'" (click)="criticalmodal.show(alert.count)"
           title="There are {{ alert.count }} {{alert.alert_type}} alerts, click to view details">{{ alert.count }} {{alert.alert_type}} alerts
        </a>
        <a href="#" *ngIf="alert.alert_type=='other'" (click)="criticalmodal.show(alert.count)"
           title="There are {{ alert.count }} {{alert.alert_type}} alerts, click to view details">{{ alert.count }} {{alert.alert_type}} alerts
        </a>

    </div>
</div>
<critical-modal #criticalmodal>
    <div class="app-modal-header">
        There are {{this.count}} Critical Alerts
    </div>
    <div class="app-modal-body">
        Showing Critical Alerts Here!
    </div>
    <div class="app-modal-footer">
        <button type="button" class="btn btn-default" (click)="criticalmodal.hide()">Close</button>
    </div>
</critical-modal>
<primary-modal #primarymodal>
    <div class="app-modal-header">
        There are {{this.count}} Other Alerts
    </div>
    <div class="app-modal-body">
        Showing Other Alerts Here!
    </div>
    <div class="app-modal-footer">
        <button type="button" class="btn btn-default" (click)="primarymodal.hide()">Close</button>
    </div>
</primary-modal>

警报-detail.component.ts

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { CriticalModalComponent } from './critical-modal';
import { PimarylModalComponent } from './primary-modal';

@Component({
  selector: 'alert-detail',
  templateUrl: './src/alert.detail.html'
})

export class AlertDetail {
    constructor() {
        this.alerts =
        [
            {
             "alert_type":"critical",
             "count": 3
            },
            {
             "alert_type":"other",
             "count":18
            }
        ];        
    };
    };
}

初级modal.ts

import {Component} from '@angular/core';

@Component({
  selector: 'primary-modal',
  template: `
  <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 modal-primary">
          <ng-content select=".app-modal-header"></ng-content>
        </div>
        <div class="modal-body">
          <ng-content select=".app-modal-body"></ng-content>
        </div>
        <div class="modal-footer">
          <ng-content select=".app-modal-footer"></ng-content>
        </div>
      </div>
    </div>
  </div>
  `,
  styles: [`
    .modal {
      background: rgba(0,0,0,0.6);
    }
  `]
})
export class PrimaryModalComponent {

  public visible = false;
  private visibleAnimate = false;

  constructor(){}

  public show(count): void {
    this.visible = true;
    this.count = count;
    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();
    }
  }
}

关键modal.ts

import {Component} from '@angular/core';

@Component({
  selector: 'critical-modal',
  template: `
  <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 modal-critical">
          <ng-content select=".app-modal-header"></ng-content>
        </div>
        <div class="modal-body">
          <ng-content select=".app-modal-body"></ng-content>
        </div>
        <div class="modal-footer">
          <ng-content select=".app-modal-footer"></ng-content>
        </div>
      </div>
    </div>
  </div>
  `,
  styles: [`
    .modal {
      background: rgba(0,0,0,0.6);
    }
  `]
})
export class CriticalModalComponent {

  public visible = false;
  private visibleAnimate = false;
  public count = 0;

  constructor(){}

  public show(count): void {
    this.visible = true;
    this.count = count;
    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();
    }
  }
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BootstrapModalModule, BuiltInOptions } from 'ngx-bootstrap-modal';
import { AppComponent } from './app.component';
import { AlertDetail } from './alert.detail.component';
import { CriticalModalComponent } from './critical-modal';
import { PimarylModalComponent } from './primary-modal';

@NgModule({
    declarations: [
        AppComponent,
        AlertDetail,
        CriticalModalComponent,
        PrimaryModalComponent
    ],
    imports: [BrowserModule],
    bootstrap: [
        AppComponent,
        AlertDetail
    ]
})

export class AppModule { }

Answer 1

问题是您没有将数据传递给子组件

在 alert.detail.html

中

<primary-modal #primarymodal [count]="count">
    <div class="app-modal-header">
        There are {{this.count}} Other Alerts
    </div>
</primary-modal>

   <a *ngIf="alert.alert_type=='other'" href="#" (click)="count = alert.count; primarymodal.show(alert.count)"
       title="There are {{ alert.count }} {{alert.alert_type}} alerts, click to view details">
       {{ alert.count }} {{alert.alert_type}} alerts
    </a>

在alert.detail.component.ts中 声明变量public count;

在primary-modal.ts

import {Component, Input} from '@angular/core';
export class PrimaryModalComponent {
  @Input() count;

plunker： http://plnkr.co/edit/YfY7AA95Y3wTWhIJpFOs?p=preview - ＆gt;其他警报希望它有所帮助!!

Angular2-不将数据传递给模态对话框

1 个答案: