TS传值属性值的小技巧

1. 使用可选参数

可选参数允许您在传递属性值时指定默认值。这对于那些可能不需要设置值或可以留空的参数非常有用。

例如，以下代码定义了一个具有可选参数 name 的组件：

@Component({
  selector: 'my-component',
  template: `<div>{{ name }}</div>`
})
export class MyComponent {
  @Input() name?: string;
}

然后，您可以通过以下方式使用该组件：

<my-component></my-component>

或者，您可以指定一个值：

<my-component name="John Doe"></my-component>

2. 使用默认值

默认值允许您为属性指定一个默认值，即使您没有在组件中显式设置该值。这对于那些始终具有默认值或在大多数情况下具有默认值的参数非常有用。

例如，以下代码定义了一个具有默认值 John Doe 的组件：

@Component({
  selector: 'my-component',
  template: `<div>{{ name }}</div>`
})
export class MyComponent {
  @Input() name = 'John Doe';
}

然后，您可以通过以下方式使用该组件：

<my-component></my-component>

您也可以覆盖默认值：

<my-component name="Jane Doe"></my-component>

3. 使用类型转换

类型转换允许您将一种类型的值转换为另一种类型。这对于那些需要将一种类型的值传递给另一种类型参数的参数非常有用。

例如，以下代码定义了一个具有类型为 number 的参数 age 的组件：

@Component({
  selector: 'my-component',
  template: `<div>{{ age }}</div>`
})
export class MyComponent {
  @Input() age: number;
}

然后，您可以通过以下方式使用该组件：

<my-component age="25"></my-component>

或者，您可以使用类型转换将字符串转换为数字：

<my-component age="{{ '25' | number }}"></my-component>

4. 使用动态属性

动态属性允许您在运行时设置属性的值。这对于那些需要根据某些条件或用户输入来设置属性值的参数非常有用。

例如，以下代码定义了一个具有动态属性 name 的组件：

@Component({
  selector: 'my-component',
  template: `<div>{{ name }}</div>`
})
export class MyComponent {
  @Input() name: string;
}

然后，您可以通过以下方式使用该组件：

<my-component [name]="userName"></my-component>

userName 是一个在组件中定义的变量。您可以使用表达式来设置动态属性的值，例如：

<my-component [name]="firstName + ' ' + lastName"></my-component>

结论

总之，在Typescript中传递属性值有多种方法。您可以使用可选参数、默认值、类型转换和动态属性来轻松处理各种情况。

希望这些技巧对您有所帮助！