角2：コンポーネントの入力変数が呼び出された後に更新されません

Question

こんにちは人々StackOverflow！

私のコードに問題があります。ご覧のとおり、毎回クラスを入力したくないので、設定された幅（ブートストラップ形式）で行を呼び出せるようにしたいと考えています。

だから私は、次のされている方法を考えた：

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

しかし、私は別のコンポーネントからコンポーネントを呼び出すと、それは私が望むように働いていません。私は、例えば

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

を使用した場合

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

操作が成功します。ディレクティブとインポートは、親コンポーネントで正しく設定されています。

ここに私の質問です：私はそれを私が望むように動作させるにはどうすればいいですか？それは動作しません

Answer 1

テンプレートが実際に初期化される前にcontentClassにあなたの割り当てが行われているので（あなたが望むように、私はあなたがあなたのcontentClassが12のrowWidthを有することを意味と仮定します）。

あなたはOnInitを実装し、あなたのrowWidth入力に割り当ててcontentClassを設定するためにngOnInitを使用する必要があります：あなたの要素は、そのCSSクラスとして代わりに12セットのcol-lg-6 col-sm-6 col-xs-6を持っています<content [rowWidth]="6"></content>で

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

。