Javascript 组件DOM是'；t更新|角度通用 @组件({ 选择器：“mh功能弹出窗口”， 模板：` {{name}} {{name}} {{data}} `, 风格：[` .满{ 背景色：rgba（0,0,0,0.2）； 宽度：100vw； 高度：100vh； 位置：固定； 排名：0； 左：0； z指数：999； } `], 提供者：[ApiService]， 动画：[ 触发器（'featurepop'[ 状态（'inactive'，样式({ 变换：“比例（0）” })), 状态（'active'，样式({ 变换：“比例（1）” })), 转换（'inactive=>active'[ 制作动画（250） ]), 转换（'active=>inactive'[ 制作动画（250） ]) ]) ] }) 导出类FeaturePopUpComponent{ 状态='非活动'； @输入（） 数据； @输入（） 名称 表演（a、b、c）{ 这个._api.get（a，b，c）.订阅( 数据=>{ this.data={'data'：a}； this.name={'name'：b}； console.log（this.data）； }, err=>console.log（err）， () => { 此._区域。运行（（）=>{ this.rend.setElementStyle（this.element.nativeElement，“显示”、“块”）； this.toggle（）； console.log（this.state）； }); } ); } }

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

show（）函数正在工作，但唯一的问题是我得到的数据没有显示在组件中（空弹出窗口）

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

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

---

我正在使用。如果有人能让它工作，请制作一个JSFIDLE或任何类似的工具。

类似的工具也能工作。我建议你读一下

另外，如果您想在html中显示{{name}，您只需要在TS中定义name变量，而不是数据：{name:'aaa}

以下是更新的plunker的链接：

//我们的根应用程序组件
进口{
组成部分，
NgModule，
版本
ViewChild，
forwardRef，
输入，
触发
国家,，
风格
使有生气
过渡，
注射
渲染器，
ElementRef
}从“@角度/核心”
从“@angular/platform browser”导入{BrowserModule}
从“@angular/platform browser/animations”导入{BrowserAnimationsModule}；
@组成部分({
选择器：“功能弹出窗口”，
模板：`
{{name}}
{{name}}
{{data}}
`,
风格：[`
.满{
背景色：rgba（0,0,0,0.2）；
宽度：100vw；
高度：100vh；
位置：固定；
排名：0；
左：0；
z指数：999；
}
#影子卡{
背景色：白色；
高度：350px；
盒影：0 3px 6px rgba（0,0,0,0.16），0 3px 6px rgba（0,0,0,0.23）；
位置：绝对位置；
最高：50%；
左：50%；
显示：内联块；
边缘顶部：100px；
左边距：-200px；
}
`],
提供者：[]，
动画：[
触发器（'featurepop'[
状态（'inactive'，样式({
变换：“比例（0）”
})),
状态（'active'，样式({
变换：“比例（1）”
})),
转换（'inactive=>active'[
制作动画（250）
]),
转换（'active=>inactive'[
制作动画（250）
])
])
]
})
导出类FeaturePopUpComponent{
状态='非活动'；
数据；
名称
构造函数（私有元素：ElementRef，
私有格式副本（渲染器）{
this.rend.setElementStyle（element.nativeElement，“显示”、“无”）；
}
表演（a、b）{
这个数据=a；
this.name=b；
this.rend.setElementStyle（this.element.nativeElement，“显示”、“块”）；
this.toggle（）；
console.log（this.state）；
}
切换（）{
this.state=（this.state=='active'？'inactive'：'active'）；
}
}
@组成部分({
选择器：“我的应用程序”，
模板：`
打开我
`,
})
导出类应用程序{
@ViewChild（FeaturePopUpComponent）弹出窗口：FeaturePopUpComponent；
A.
B
构造函数（）{
}
show（）{
this.a='hi'；
this.b='hello'；
this.popup.show（this.a，this.b）；
}
}
@NGD模块({
导入：[BrowserModule，BrowserAnimationsModule]，
声明：[应用程序，FeaturePopUpComponent]，
引导：[应用程序]
})
导出类AppModule{
}

类似的东西会有用的。我建议你阅读一下

另外，如果您想在html中显示{{name}，您只需要在TS中定义name变量，而不是数据：{name:'aaa}

以下是更新的plunker的链接：

//我们的根应用程序组件
进口{
组成部分，
NgModule，
版本
ViewChild，
forwardRef，
输入，
触发
国家,，
风格
使有生气
过渡，
注射
渲染器，
ElementRef
}从“@角度/核心”
从“@angular/platform browser”导入{BrowserModule}
从'@angula'导入{BrowserAnimationsModule}
@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);
              });

          }
      );

  }

 }

//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 {
}