Angular - Как установить значения по умолчанию для дополнительных свойств ввода

Question

Интересно, что такое «Angular / Typescript way» для установки значений по умолчанию для необязательных свойств в Angular-компоненте? У меня возникают проблемы, когда значения, передаваемые в необязательные свойства, равны null или undefined.

В настоящее время у меня что-то вроде этого:

export class FooComponent implements OnInit {
  @Input() foo = 'foo';
  @Input() bar = 0;
  @Input() baz?: string;
}

Если вы объявляете значение по умолчанию, вам не нужно указывать тип, поскольку это тип назначенного значения, а свойство по умолчанию не является обязательным. Это случай свойств bar и foo.

В качестве альтернативы вы можете использовать ?, чтобы отметить, что это свойство является необязательным, но вы не можете объявить его значение по умолчанию. Это случай свойства baz.

Теперь давайте посмотрим, что происходит, когда вы передаете различные значения этим свойствам.

<app-foo-component
  [foo]
  [bar]="null"
  [baz]="undefined"
>
</app-foo-component>

если я запишу в журнал эти свойства, вот что я получил:

foo будет правильно 'foo'

bar будет null

baz будет undefined

Есть ли элегантный способ также установить значения по умолчанию, когда переданные значения равны нулю / не определены, или мне нужна некоторая проверка в OnInit, как это?

OnInit() {
  this.bar = this.bar || 0;
}

Такое чувство, что есть какой-то способ сделать это. Для меня необязательное свойство означает, что значение может отсутствовать, быть нулевым или неустановленным, но когда я хочу установить значение по умолчанию, оно работает только тогда, когда свойство отсутствует или пусто. В этих случаях он по-прежнему имеет значение null или undefined, и это, похоже, сбивает с толку.

Answer 1

Вы можете определить bar как свойство получателя / установщика и убедиться, что значение по умолчанию применяется в установщике, когда это необходимо:

private _bar = 0;

@Input() get bar() {
  return this._bar;
}
set bar(value) {
  this._bar = value || 0;
}

См. этот стекаблитц длядемо.