Angolare 2: la variabile di input in Component non viene aggiornata una volta chiamata

Question

Salve persone di StackOverflow!

Ho qualche problema con il mio codice. Come puoi vedere, voglio essere in grado di chiamare una riga con una larghezza impostata (formato bootstrap), poiché non voglio digitare la classe ogni volta.

Così ho pensato a un modo che è la seguente:

import { Component, Input } from '@angular/core'; 

@Component({ 
    moduleId: module.id, 
    selector: 'content', 
    template: ` <div class="row"> 
        <div [ngClass]="contentClass" 
         id="content" 
         [ngStyle]="{ 'color': 'black', 'font-size': '20px' }"> 
        <ng-content></ng-content> 
        </div> 
       </div>`, 
    styleUrls: ['content.stylesheet.css'] 
}) 

export class ContentComponent { 
    @Input() rowWidth = "12"; 
    contentClass=(("col-lg-" + this.rowWidth)+(" col-sm-" + this.rowWidth)+(" col-xs-" + this.rowWidth)); 
} 

Ma una volta che io chiamo il componente da un altro componente, non funziona nel modo desiderato.

<banner bannerHeight="300px"></banner> <!-- This works --> 
<content rowWidth="6"></content>   <!-- This doesn't --> 

Se ho usato per esempio

<content [ngStyle]="{'color': 'black'}"></content> 

l'operazione riesce. Le direttive e le importazioni sono impostate correttamente nel componente principale.

Quindi, ecco la mia domanda: come faccio a farlo funzionare nel modo in cui lo voglio?

Answer 1

Non funziona (nel modo desiderato, presumo che significa che il vostro contentClass ha un rowWidth di 12) perché il vostro compito di contentClass è fatta prima che il modello è in realtà inizializzato.

è necessario implementare e utilizzare OnInitngOnInit per impostare il contentClass con l'assegnazione al rowWidth ingresso:

export class ContentComponent implements OnInit{ 
    @Input() rowWidth = 12; 
    contentClass:string; 

    ngOnInit():any { 
     this.contentClass = (("col-lg-" + this.rowWidth)+(" col-sm-" + this.rowWidth)+(" col-xs-" + this.rowWidth)); 
    } 
} 

Con <content [rowWidth]="6"></content> vostro elemento dovrà poi col-lg-6 col-sm-6 col-xs-6 invece di 12 insieme come le sue classi CSS.