Question

@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（）函数正在运行，但唯一的问题是我得到的数据没有显示在组件中（空弹出窗口）。

当我更改浏览器的屏幕大小时，数据会在弹出窗口上更改。

onChange（）在我更改屏幕尺寸时工作，但在数据更改时不工作。我尝试将数据更改为JSON对象。我尝试过使用changeDetection.Ref和NgZone但是没有用。尝试使用ngDoCheck（）但无法正常工作。

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

Answer 1

会像工作一样。我建议你阅读@Inputs。

此外，如果您想在html中显示{{name}}，您只需在TS中定义名称变量，而不是数据：{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 {
}

组件DOM未更新|角度通用

1 个答案: