Angular 角度2：组件中的输入变量在调用后不会更新

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

从'@angular/core'导入{Component，Input}；
@组成部分({
moduleId:module.id，
选择器：“内容”，
模板：`
`,
样式URL:['content.stylesheet.css']
})
导出类ContentComponent{
@输入（）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>

手术成功了。在父组件中正确设置了指令和导入

因此，我的问题是：如何使它按我希望的方式工作？

它不工作（按你希望的方式，我假设你的意思是你的

contentClass

的

行宽
为
12
），因为你对
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));
    }
}

使用
元素将
col-lg-6 col-sm-6 col-xs-6
而不是
12
设置为其css类。
这就成功了！我完全忘记了生命周期挂钩。。新手犯的错误。因此，正如contentClass的诀窍一样，对每个输入变量实现这样的功能是最好的做法，还是只有在有处理时间的情况下（例如，计算或连接）？如果您想在初始化时使用输入，那么是的（您大部分时间都想要）你需要一个生命周期挂钩。