Javascript 如何在Angular2中为@Input设置默认参数？

假设我有一个组件，它将显示

名称

属性，因此大致如下：

从'angular2/core'导入{组件，输入}；
@组成部分({
选择器：“演示”，
模板：`{name}}`，
样式：[``]，
})
导出类演示{
@Input（）名称：string；
}

试试看

---

我想你可以利用你的想法使用模板。因此，这将是：

在组件中：

@Input () name:String;

在模板中：

<div>{{ name != '' ? name : '[no name]' }}</div>

{{name！=''名称：'[no name]}

---

这将检查名称是否为空，如果名称已传递，则使用“[无名称]”或插入名称。

在应初始化的组件中，如：

@Input () name:String='';

在HTML中，您可以使用：

{{ name ===''?  'empty string': name }}

---

您可以使用setter截取

@Input（）

，并使用私有字段对其进行支持。在setter中，您将执行null检查，以使字段仅设置为非null值。最后，将模板绑定到已设置初始值的私有文件。

使用angular 8和默认tslint设置，IDE将注意到：

所以你可以写下：

@Input（）addclass=''；

没有任何“类型注释”

这是解决这个问题的正确方法（角度2到9）

寻址解决方案：为@Input变量设置默认值。如果没有值传递给该输入变量，则它将采用默认值

例如：

我有一个名为bike的对象接口：

export interface bike {
  isBike?: boolean;
  wheels?: number;
  engine?: string;
  engineType?: string;
}

您制作了一个名为app bike的组件，需要通过@input decorator传递bike的属性。但您希望isBike和Wheels属性必须具有默认值（即，isBike:true，Wheels:2）

有关更详细的文章，请参阅

---

请参阅

中的分解任务，这对我不适用。即使我将其设置为模板中的另一个值，它也使用默认值。删除类型批注可以使其正常工作。但是为什么呢？这不要紧吗？

export interface bike {
  isBike?: boolean;
  wheels?: number;
  engine?: string;
  engineType?: string;
}

export class BikeComponent implements OnInit {
  private _defaultBike: bike = {
    // default isBike is true
    isBike: true,
    // default wheels  will be 2
    wheels: 2
  };

  @Input() newBike: bike = {};

  constructor() {}

  ngOnInit(): void {

   // this will concate both the objects and the object declared later (ie.. ...this.newBike )
   // will overwrite the default value. ONLY AND ONLY IF DEFAULT VALUE IS PRESENT

    this.newBike = { ...this._defaultBike, ...this.newBike };
   //  console.log(this.newBike);
  }
}