javascript - Angular 2 相当于 vuejs v-bind

Question

正如标题所暗示的，我正在寻找一种将具有多个属性的对象绑定(bind)到组件 @Inputs 的方法，而无需显式编写所有属性

假设我有这个对象

let params = {
    delta: 0.2,
    theta: 2.3,
    sigma: 'foo',
}

不必像这样单独绑定(bind)所有它们

<my-component
    [delta]="params.delta"
    [theta]="params.theta"
    [sigma]="params.sigma"/>

我想一次性绑定(bind)所有这些。

<my-component [someDirectiveIDontKnow]="params"/>

我该怎么做？

找到了先前询问的链接 question但无法让它正常工作。

编辑:我不是问如何绑定(bind)@Inputs。想象一下，我正在渲染的组件有 40 个 @Input，并且我不允许将其重写为只接受一个可以包含所有参数的 @Input。

因此编写使用此组件的模板变得非常丑陋且庞大。

....
<my-component
  [param1]="params.param1"
  [param2]="params.param2"
  [param3]="params.param3"
  [param4]="params.param4"
  [param5]="params.param5"
  [param6]="params.param6"
  [param7]="params.param7"
  [param8]="params.param8"
  [param9]="params.param9"
  [param10]="params.param10"
  [param11]="params.param11"
  [param12]="params.param12"
  [param13]="params.param13"
  [param14]="params.param14"
  ... and so on ....
/>
....

Answer 1

在我看来，最好将它们全部定义在一个模型中

您将从以下模型开始

params.model.ts

import {SomeOtherModel} from './some-other.model'

export interface ParamsModel {
    paramName1: string;
    paramName2?: string;
    paramName3?: number;
    paramName4: SomeOtherModel;
}

然后在您的组件中，您可以强制输入采用特定的模型参数

my.component.ts

import {ParamsModel} from './params.model';

@Component({..})
class MyComponent {
  @Input() params: ParamsModel;
}

app.component.html

<my-component params="paramsModel"></my-component>

app.component.ts

import {ParamsModel} from './params.model';

@Component({..})
class AppComponent implements OnInit {
    paramsModel: ParamsModel;


    ngOnInit(): void {
        this.paramsModel = <ParamsModel>{someValue: someValue};
    }
}

这样你就可以完成完整的代码。

但请注意! Angular 不会深度监视内容，因此更改 Params 对象内的内容，在 javascript 中仍将具有相同的对象 ID，导致 Angular 看不到更改。

有一些解决方法

1:绑定(bind)每个参数(这正是你不想要的)

2:当更改模型内容时，每次都会销毁实例并创建一个新实例，您可以通过在模型中添加构造函数并像此代码一样进行转换来实现此目的

export class ParamsModel {
    paramName1: string;
    paramName2?: string;
    paramName3?: number;
    paramName4: SomeOtherModel;

    constructor(config?: ParamsModel) {
        Object.assign(this, config);
    }
}

// first init
this.paramsModel = new ParamsModel(<ParamsModel>{someValue: someValue});

// updated init
this.paramsModel = new ParamsModel(this.paramsModel);
this.paramsModel.changedValue = changedValue; // (could also use an extend function on original params model)

3:创建一个带有事件的观察者，并在另一端触发更新事件

4:使用ngDoCheck自行检查内容是否发生变化