如何设置 Angular 2 组件属性的默认值？

在 Angular 2 中，组件属性是通过输入（input）属性来定义的。输入属性是在组件外部设置的属性，可以通过该属性向组件传递数据。有时，我们需要在组件中设置默认值，以确保组件在没有输入属性时能够正常工作。本文将介绍如何设置 Angular 2 组件属性的默认值。

使用@Input 装饰器

在 Angular 2 中，可以使用@Input 装饰器定义输入属性。在定义输入属性时，可以给它们指定默认值。例如：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-greeting',
  template: `<h1>Hello, {{name}}!</h1>`
})
export class GreetingComponent {
  @Input() name: string = 'Stranger';
}

在上面的代码中，我们定义了一个名为“name”的输入属性，并为其指定了默认值“Stranger”。当组件被使用时，如果没有指定输入属性“name”的值，组件将使用默认值“Stranger”。

在 ngOnInit 生命周期钩子中设置默认值

有时，我们需要在组件中使用一些由代码计算得出的默认值。在这种情况下，可以在组件的ngOnInit 生命周期钩子中设置默认值。例如：

import { Component, Input } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-greeting',
  template: `<h1>Hello, {{name}}!</h1>`
})
export class GreetingComponent {
  @Input() name: string;

  constructor(private dataService: DataService) {}

  ngOnInit() {
    // 计算默认值
    this.name = this.calculateDefaultName();
  }

  private calculateDefaultName(): string {
    // 从数据服务中获取默认名称
    return this.dataService.getDefaultName();
  }
}

在上面的代码中，我们使用了一个名为“DataService”的服务来计算输入属性“name”的默认值。在组件的ngOnInit 生命周期钩子中，我们调用calculateDefaultName 方法来计算默认名称，并将其赋值给输入属性“name”。

小结

在本文中，我们介绍了如何设置 Angular 2 组件属性的默认值。你可以使用@Input 装饰器来为输入属性指定默认值，也可以在ngOnInit 生命周期钩子中设置由代码计算得出的默认值。希望这些技巧能够帮助你编写更加健壮的 Angular 2 组件。