Почему эта строка в исходном коде Angular Material имеет `||null`?

Question

Я пытаюсь создать свою собственную библиотеку компонентов для другого CSS-фреймворка.Поэтому я изучил исходный код Angular Material в качестве примера.И затем я наткнулся на эту строку:

https://github.com/angular/material2/blob/2a086ce4751d71db8cfb85a33e2ca702f02ce1c0/src/lib/button/button.ts#L73

@Component({
  moduleId: module.id,
  selector: `button[mat-button], button[mat-raised-button], button[mat-icon-button],
             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],
             button[mat-flat-button]`,
  exportAs: 'matButton',
  host: {
    '[disabled]': 'disabled || null', // This line!
    '[class._mat-animation-noopable]': '_animationMode === "NoopAnimations"',
  },
  templateUrl: 'button.html',
  styleUrls: ['button.css'],
  inputs: ['disabled', 'disableRipple', 'color'],
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MatButton extends _MatButtonMixinBase {
  ...
}

Я просто хочу подтвердить свое понимание, разве линия, которую я выделил, не должна содержать || null часть?

Мое понимание таково: этот компонент связан с HTMLButtonElement, который имеет свое собственное свойство disabled.Логическое значение может быть просто передано элементу.

Любой ответ приветствуется.(Особенно Кара, так как именно ты ввел эту строчку: P)

Answer 1

Привязка свойства disabled к значениям false или null позволяет держать кнопку включенной:

<button [disabled]="false"> --> Button enabled
<button [disabled]="null">  --> Button enabled

Следовательно, я не понимаю, почему онииспользуйте disabled || null.Я подозреваю, что строка кода , о которой идет речь в вопросе, была скопирована / вставлена ​​из другой части кода , где атрибут disabled связан,В случае атрибута, привязка к false отключает кнопку (она устанавливает атрибут в строку "false", что соответствует действительности), в то время как привязка к null сохраняет кнопку включенной (она удаляет атрибут disabled):

<button [attr.disabled]="false"> --> Button disabled
<button [attr.disabled]="null">  --> Button enabled

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