1 
@Component({
  selector: 'mh-feature-popup',
  template: `
  <div class="full">
  <div>
    <div class="container-fluid" [@featurepop]="state">
      <div class="row">
        <div class="col-xs-12 col-md-4 col-md-offset-4 popup">
          <div class="row">
            <div id="shadow-card">
                <div class="col-xs-12 dialog-header hidden-md hidden-lg">
                    <div class="col-xs-1 skeleton hidden-md hidden-lg clickCursor" (click)="toggleState()">
                        <div class="close"></div>
                    </div>
                    <div class="text_heading col-xs-10">
                        <span *ngIf="name">{{name}}</span>
                    </div>
                </div>
                <div class="row dialog-content">
                    <div class="dialog-title skeleton col-md-10 col-md-push-1 hidden-xs hidden-sm">
                        <span *ngIf="name">{{name}}</span>
                    </div>
                    <div class="col-md-2 skeleton hidden-xs hidden-sm clickCursor" (click)="toggleState()">
                        <div class="close"></div>
                    </div>
                </div>
                <div *ngIf="data" #data_value>{{data}}
                </div>
            </div>
          </div>
        </div> 
      </div>
    </div>
  </div>
</div>
        `,
styles:[`
.full{
    background-color: rgba(0,0,0,0.2);
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
}
`],
providers:[ ApiService ],
animations: [
  trigger('featurepop', [
    state('inactive', style({
      transform: 'scale(0)'
    })),
    state('active', style({
      transform: 'scale(1)'
    })),
    transition('inactive => active', [
      animate(250)
    ]),
    transition('active => inactive', [
      animate(250)
    ])
  ])
]
})
 export class FeaturePopUpComponent {
  state = 'inactive';
  @Input()
      data;

  @Input()
      name;

  show(a,b,c){
      this._api.get(a,b,c).subscribe(
          data => {
              this.data = {'data': a};
              this.name = {'name': b};
              console.log(this.data);
          },
          err => console.log(err),
          () => {
              this._zone.run(() => {
                  this.rend.setElementStyle(this.element.nativeElement,"display","block");
                  this.toggle();
                  console.log(this.state);
              });

          }
      );

  }

 }

这是一个弹出组件。所以它应该是隐藏的，当调用 show() 函数时，它应该显示从 API 调用接收到的内容。

show() 函数正在工作，但唯一的问题是我得到的数据没有显示在 component(empty popup)在此处输入图像描述中。

当我更改浏览器的屏幕尺寸时，弹出窗口中的数据会发生变化在此处输入图像描述。

onChange() 在我更改屏幕大小时起作用，但在数据更改时不起作用。我尝试将数据更改为 JSON 对象。我也尝试使用 changeDetection.Ref 和 NgZone 但没有用。也尝试使用 ngDoCheck() 但不起作用。

我正在使用angular-universal starter kit。如果有人可以使它工作，请制作一个 jsfiddle 或任何。

4

1 回答 1

0

类似的东西会起作用。我建议您阅读有关@Inputs的信息。

此外，如果你想在 html 中显示 {{name}}，你只需要在 TS 中定义 name 变量，而不是 data:{name:'aaa"}

这是更新的 plunker 的链接：https ://plnkr.co/edit/owx397i2mLGBZ46oioQ1?p=preview

//our root app component
import {
  Component,
  NgModule,
  VERSION,
  ViewChild,
  forwardRef,
  Input,
  trigger,
  state,
  style,
  animate,
  transition,
  Inject,
  Renderer,
  ElementRef
} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';


@Component({
  selector: 'feature-popup',
  template: `
    <div class="full">
      <div>
        <div class="container-fluid" [@featurepop]="state">
          <div class="row">
            <div class="col-xs-12 col-md-4 col-md-offset-4 popup">
              <div class="row">
                <div id="shadow-card">
                  <div class="col-xs-12 dialog-header hidden-md hidden-lg">
                    <div class="col-xs-1 skeleton hidden-md hidden-lg clickCursor" (click)="toggle()">
                      <div class="close"></div>
                    </div>
                    <div class="text_heading col-xs-10">
                      <span *ngIf="name">{{name}}</span>
                    </div>
                  </div>
                  <div class="row dialog-content">
                    <div class="dialog-title skeleton col-md-10 col-md-push-1 hidden-xs hidden-sm">
                      <span *ngIf="name">{{name}}</span>
                    </div>
                    <div class="col-md-2 skeleton hidden-xs hidden-sm clickCursor" (click)="toggle()">
                      <div class="close"></div>
                    </div>
                  </div>
                  <div *ngIf="data" #data_value>{{data}}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  `,
  styles: [`
    .full {
      background-color: rgba(0, 0, 0, 0.2);
      width: 100vw;
      height: 100vh;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 999;
    }

    #shadow-card {
      background-color: white;
      height: 350px;
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
      position: absolute;
      top: 50%;
      left: 50%;
      display: inline-block;
      margin-top: 100px;
      margin-left: -200px;
    }
  `],
  providers: [],
  animations: [
    trigger('featurepop', [
      state('inactive', style({
        transform: 'scale(0)'
      })),
      state('active', style({
        transform: 'scale(1)'
      })),
      transition('inactive => active', [
        animate(250)
      ]),
      transition('active => inactive', [
        animate(250)
      ])
    ])
  ]
})
export class FeaturePopUpComponent {
  state = 'inactive';
  data;
  name;

  constructor(private element: ElementRef,
              private rend: Renderer) {
    this.rend.setElementStyle(element.nativeElement, "display", "none");
  }

  show(a, b) {
    this.data = a;
    this.name = b;
    this.rend.setElementStyle(this.element.nativeElement, "display", "block");
    this.toggle();
    console.log(this.state);

  }

  toggle() {
    this.state = (this.state === 'active' ? 'inactive' : 'active');
  }

}

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2 (click)="show()">Open me</h2>
      <feature-popup></feature-popup>
    </div>
  `,
})
export class App {
  @ViewChild(FeaturePopUpComponent) popup: FeaturePopUpComponent;
  a;
  b;

  constructor() {
  }

  show() {
    this.a = 'hi';
    this.b = 'hello';
    this.popup.show(this.a, this.b);
  }
}

@NgModule({
  imports: [BrowserModule, BrowserAnimationsModule],
  declarations: [App, FeaturePopUpComponent],
  bootstrap: [App]
})
export class AppModule {
}
于 2017-04-23T12:45:12.207 回答