Angular 2: Eingangsvariable in Component aktualisiert nicht einmal aufgerufen

Question

Hallo Leute von StackOverflow!

Ich habe Probleme mit meinem Code. Wie Sie sehen können, möchte ich in der Lage sein, eine Zeile mit einer festgelegten Breite (Bootstrap-Format) aufzurufen, da ich die Klasse nicht jedes Mal eingeben möchte. So

Ich dachte an eine Art und Weise, die ist die folgende:

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)); 
} 

Aber sobald ich die Komponente aus einer anderen Komponente aufrufen, es funktioniert nicht so, wie ich will.

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

Wenn ich zum Beispiel verwendet

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

die Operation erfolgreich. Die Anweisungen und Importe sind in der übergeordneten Komponente korrekt festgelegt.

Also hier ist meine Frage: Wie kann ich es so machen, wie ich es will?

Answer 1

Es funktioniert nicht (wie Sie wollen, ich nehme an, Sie meinen, dass Ihr contentClass eine rowWidth von 12 hat), weil Ihre Zuordnung zu contentClass gemacht wird, bevor die Vorlage tatsächlich initialisiert wird.

Sie haben OnInit zu implementieren und verwenden ngOnInit die contentClass mit der Zuordnung zu Ihrem rowWidth Eingang zu setzen:

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)); 
    } 
} 

Mit <content [rowWidth]="6"></content> Ihr Element wird dann col-lg-6 col-sm-6 col-xs-6 statt 12 Satz als CSS-Klassen.