@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调用接收到的内容。组件DOM没有更新|角通用
show()函数正在工作,但唯一的问题是,我得到的数据没有显示在组件(空弹出)。
onChange()工作时,我改变屏幕大小,但没有数据改变时。我试图将数据更改为JSON对象。我尝试使用changeDetection.Ref和NgZone,但没有工作。用ngDoCheck()也试过,但不起作用。
我使用angular-universal starter kit。如果任何人都可以使它工作,请让一个jsfiddle或任何。
不确定是否有问题,但我看到一个问题 - 组件修改了输入数据,输入数据应该是不可变的 –
如果你没有发现问题,请运行它...你会看到它。 。我尝试了所有的组合...我尝试了没有输入太多,并输入不可变... –
请创建一个plunk,我会尝试更新,使其工作 –