Question

正如标题所示，我正在寻找一种将具有多个属性的对象绑定到组件@Input的方法，而不必显式地编写所有这些

假设我有这个物体

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

不必像这样单独绑定所有

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

我想一次捆绑所有它们。

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

我该怎么做？

找到了指向先前询问的question的链接，但无法使其正常工作。

编辑： 我不是在问如何绑定@Inputs。想象一下，我正在渲染的组件有40个@Inputs，而我不允许重写它以只接受一个可以包含所有参数的@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：绑定每个参数（这正是您不想要的）

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进行内容是否更改

Answer 2

没有通用指令在Angular中传递输入属性。但是，Angular支持绑定任何有效的JavaScript类型，无论是对象，数组还是基元。

在模板中

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

在该类中，您必须使用@Input装饰器将一个对象标记为输入。您可以在任何生命周期挂钩中访问它的值，如下所示。请注意，params不会在构造函数内部设置，因为在实例化该类之后将执行视图绑定。

class MyComponent {
  @Input()
  params: any

  constructor() { }   // <-- params not set

  ngOnChanges() { } // <-- anytime params changes

  ngOnInit() { } // <-- once when the component is mounted

}

vuejs v-bind的角度2等效项

2 个答案: