Açısal 2: Bileşen içindeki giriş değişkeni bir kez güncellenmiyor

Question

Merhaba insanlar StackOverflow!

Kodumda sorun yaşıyorum. Gördüğünüz gibi, her seferinde sınıfı yazmak istemediğim için set genişliği (bootstrap formatı) içeren bir satırı arayabilmek istiyorum.

Yani şu bir yol buldum:

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

Ama başka bir bileşenden bileşeni çağrısı bir kez, ben istediğim gibi çalışmıyor. Ben, örneğin kullanıldığında

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

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

işlemi başarılı olur. Direktifler ve ithalatlar ana bileşende doğru şekilde ayarlanmıştır.

İşte benim sorum şu: Nasıl olmasını istediğim gibi çalıştırabilirim?

Answer 1

O çalışmıyor şablon gerçekte başlatılmadan önce contentClass için atama yapılır çünkü (istediğiniz şekilde, ben size contentClass12 bir rowWidth olduğu anlamına varsayalım).

<content [rowWidth]="6"></content> senin elemanın ile

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

sonra col-lg-6 col-sm-6 col-xs-6 yerine kendi css sınıfları olarak ayarlanmış 12 sahip olacak:

Sen OnInit uygulamak ve rowWidth girişine atama ile contentClass ayarlamak için ngOnInit kullanmak zorunda.