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属性。布尔值可以很好地传递给元素。

任何答案将不胜感激。（尤其是Kara，因为正是您介绍了此行：P）

Answer 1

将disabled按钮属性绑定到值false或null都使该按钮保持启用状态：

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

因此，我不明白他们为什么使用disabled || null。我怀疑问题中提到的line of code是从another part of the code（绑定disabled 属性的地方）复制/粘贴的。对于属性，绑定到false会禁用按钮（将属性设置为字符串"false"，这是事实），而绑定到null则使按钮保持启用状态（它删除disabled属性）：

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

有关演示，请参见this stackblitz。

为什么在Angular Material源代码中此行具有`||空`？

1 个答案: