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

但是，一旦我從另一個調用組件的組件，它不工作我想要的方式。

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

如果我用於例如

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

操作成功。指令和導入在父組件中正確設置。

所以這裏是我的問題：我如何使它按照我想要的方式工作？

Answer 1

它不工作（你所希望的方式，我假設你的意思是，你的contentClass有12一個rowWidth），因爲模板實際上是初始化之前提交作業contentClass而成。

您必須實現OnInit和使用ngOnInit到contentClass與分配設置爲您rowWidth輸入：

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

隨着<content [rowWidth]="6"></content>你的元素，然後將有col-lg-6 col-sm-6 col-xs-6代替12集作爲其CSS類。