구성 요소 DOM이 업데이트되지 않습니다. 범용 유니버설

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()도 시도했지만 작동하지 않습니다.

1m은 angular-universal starter kit을 사용합니다. 누군가가 그것을 작동하게 만들 수 있다면 jsfiddle 또는 any를 만들어주세요.

Answer 1

같은 것이 작동합니다. @Inputs에 대해 읽어 보시기 바랍니다. 또한 표시 할 경우

{{이름}} HTML에서, 당신은 단지 TS에서 데이터가 아니라 이름 변수를 정의해야합니다 https://plnkr.co/edit/owx397i2mLGBZ46oioQ1?p=preview

:

여기

업데이트 plunker에 대한 링크입니다 : { 'AAA'이름을}

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