Question

我需要将计算值传递给Angular组件。目前，我正在这样做：

<component [value]="getCalculatedValue()"></component>

问题在于计算值的基数每分钟更改一次，因此也必须更新计算值。

如何告诉angular为它使用的每个组件再次运行getCalculatedValue方法？

由于该组件是外部组件，因此我希望采用一种无需修改该组件的方法。

Answer 1

您应该代替返回值，而不是将函数（返回值）传递给组件。

HTML：

<component [value]="value"></component>

TS：

export class CurrentComponent implements OnInit {
    value: any;

    ngOnInit() {
        this.value = getCalculatedValue();

        // insert functionality to recalculate value on either a timer, Observable, etc...
    }
}

输入中的功能也会在更改检测时重新运行

@Component({
    selector: 'app-current',
    templateUrl: './current.component.html',
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class CurrentComponent implements OnInit {

    constructor(private cd: ChangeDetectorRef) { }

    ngOnInit() {
        // call this.cd.detectChanges() when you want an update
    }

}

Answer 2

使用ViewChild，您可以访问主机组件.ts文件中的外部组件。您可以随时在其中更改外部组件的@Input（）属性。像这样

<component #myComponent [value]="getCalculatedValue()"></component>

在ts文件中，您可以通过ViewChild创建对外部组件的引用。像这样

  @ViewChild('myComponent') public myComponent: Component;

请注意，“ myComponent”是指主机组件.html部分中用＃引用的模板引用变量，“ Component”是指外部组件的类名。

现在您可以在任何事件，回调，方法等处更改@Input（）属性。

myComponent.value = getCalculatedValue();

谢谢。

如何重新运行作为输入属性传递给角度组件的方法？

2 个答案: