угловой 2 эквивалент vuejs v-bind

Question

Поскольку заголовок подразумевает, что я ищу способ привязать объект с несколькими свойствами к компоненту @Inputs без необходимости явно записывать все из них

Допустим, у меня есть этот объект

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"/>

Как я могу это сделать?

Нашел ссылку на ранее заданный вопрос , но не смог заставить его работать должным образом.

Редактировать: Я не спрашиваю, как связать @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 будет сохраняться тот же идентификатор объекта, в результате чего 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

}