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

时间:2016-03-07 08:21:56

标签: javascript typescript angular

假设我有一个显示name属性的组件,所以它大致如下:



import {Component, Input} from 'angular2/core';

@Component({
  selector: 'demo',
  template: `<div>{{name}}</div>`,
  styles: [``],
})
export class Demo {
  @Input() name: string;
}
&#13;
&#13;
&#13;

问题是,当有人使用此组件但未传递任何[noname]属性时,如何显示name

唯一的解决方案是在{{ name || '[noname]' }}等模板中使用逻辑运算符。

6 个答案:

答案 0 :(得分:41)

尝试

@Input() name: string = 'noname';

答案 1 :(得分:2)

具有角度8和默认tslint设置,您的IDE会注意到:

enter image description here

所以可以写:

@Input() addclass = '';

没有任何“类型注释”。

答案 2 :(得分:1)

您可以使用setter拦截@Input()并使其受私有字段支持。在setter中,您执行nullcheck,因此字段仅设置为非null值。最后,将模板绑定到已设置初始值的私有模式。

答案 3 :(得分:0)

我认为您可以使用您使用模板的想法。所以它会是:

在组件中:

@Input () name:String;

在模板中:

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

这将检查名称是否为空,并使用&#39; [no name]&#39;或者如果传递名称,则插入名称。

答案 4 :(得分:0)

在组件中,您应该初始化如下:

@Input () name:String='';

在HTML中,您可以使用:

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

答案 5 :(得分:0)

这是对此的正确解决方案。 (角度2到9)

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

示例:

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

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

您制作了一个名为app-bike的组件,需要在该组件中使用@input的angular装饰器传递bike的属性。但您希望isBike和Wheels属性必须具有默认值(即isBike:true,wheels:2)

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);
  }
}

有关详细文章,请参见this

here引用销毁结构分配