没有值或方括号的角组件属性

Question

我需要将 isbold 属性添加到角度组件

<child-component isBold />

备注以下

• 我更喜欢 not 在属性周围使用方括号[]名称如果用作true flag（如上所述，长版本为isbold = true）。

• 但是，我希望能够将其用作输入属性

   ＆lt; child-component [isbold] =“ parentbooleanorfunction” /＆gt;
   

代码bellow破坏了第一个要求

@Input() isBold: boolean = true

，在Angular 13中有办法无需编写其他助手功能吗？

i note 我读了类似的问题在这里，但是所选的解决方案需要我没有的其他代码或材料用法。

Answer 1

为此，我建议创建自己的cocion函数/类型类似于Angular CDK函数/类型（如果您不需要添加@Angular/cdk对于您的项目依赖项），比为每个输入创建一个指令非常容易实现：

例如， boolean属性来自@angular/cdk/cocrecion：

/**
 * Type describing the allowed values for a boolean input.
 * @docs-private
 */
export type BooleanInput = string | boolean | null | undefined;

/** Coerces a data-bound value (typically a string) to a boolean. */
export function coerceBooleanProperty(value: any): boolean {
  return value != null && `${value}` !== 'false';
}

然后您可以直接在任何组件中使用它们，如以下内容：

@Input()
get isBold(): boolean {
  return this._isBold;
}
set isBold(isBold: BooleanInput) {
  this._isBold = coerceBooleanProperty(isBold);
}
private _isBold = false;

<child-component isBold />
<child-component [isBold]="parentBooleanOrFunction" />

您可以在Angular/codar/codions/src/cdk/coercion/下找到Angular CDK cocrecion cocrecion function/类型的完整列表：
https://github.com/github.com/angular/angular/compar/components/components/tree/main/main/main/main/ SRC/CDK/CORCION

更新：

如果您不想使用任何辅助功能/类型，则可以像 defted apis and themated apis and in angular 13 ：

@Input() get isBold(): boolean {
  return this._isBold;
}
set isBold(value: boolean | '') {
  this._isBold = value === '' || value;
}
private _isBold = false;

当输入使用Getter/Setter对时，可能希望让Setter接受比Getter返回的类型更广泛的类型集，例如，当Setter首先转换输入值时。但是，直到打字稿4.3 getter/setter对具有相同的类型，因此无法准确声明此模式。

由于打字稿4.3限制已被删除；现在可以
接受比Getter返回的更宽类型。这意味着
不再需要该输入胁迫场，因为它们的效果可以
可以通过拓宽设置器的类型来实现。

在此处查看有关“输入设置器强制”折旧的更多信息：此处：
https://angular.io/guide/guide/guide/deprecations#input-settup-setter-coercion

Answer 2

它不会用作普通@Input

您可以使用指令来执行此操作，但它不会在 stackblitz

创建输入指令

@Directive({
  selector: '[isBold]'
})
export class IsBoldDirective {

  @Input() isBold:boolean;

  constructor() { }

  ngOnInit(){
    if(this.isBold!==false){
      this.isBold=true; // defaults to true
    }
  }
}

将其注入组件，

@Component({
  selector: 'app-testing',
  templateUrl: './testing.component.html',
  styleUrls: ['./testing.component.css']
})
export class TestingComponent {
  constructor(@Self() @Optional() private isBold:IsBoldDirective) { }
  get value(){
    return this.isBold?.isBold ?? true; // this 'true' is the default value if isBold is not there
  }
}

并将其像这样将其用于

Absence: <app-testing></app-testing>
Presence: <app-testing isBold></app-testing>
Set value: <app-testing [isBold]="false"></app-testing>

结果

Absence:

true
Presence:

true
Set value:

false