組件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（）也試過，但不起作用。

我使用angular-universal starter kit。如果任何人都可以使它工作，請讓一個jsfiddle或任何。

Answer 1

類似的東西會工作。我建議你閱讀約@Inputs。

此外，如果你想顯示{{名}}在HTML中，你只需要定義名稱變量TS，而不是數據：{名稱：'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 { 
}