Angular2，TypeScript，如何读取绑定属性值到组件类（在 ngOnInit 中未定义）[重复]

typescript

如何在Angular2中使用typescript读取和绑定属性值到组件类（在ngOnInit中未定义）

在Angular2中，我们可以使用typescript来开发组件，并且可以通过属性绑定的方式将属性值传递给组件类。在本文中，我们将学习如何在ngOnInit方法中读取和绑定属性值到组件类。

什么是ngOnInit方法

在Angular2中，ngOnInit是一个生命周期钩子方法，它在组件初始化完成后被调用。ngOnInit方法是在组件的构造函数之后被调用，但在ngOnChanges方法之前被调用。因此，在ngOnInit方法中，我们可以执行一些初始化操作，例如读取和绑定属性值。

如何读取属性值

要读取组件的属性值，我们需要在组件类中定义对应的属性，并使用@Input装饰器标记该属性。@Input装饰器使得该属性可以从父组件中进行属性绑定。

下面是一个简单的例子，展示了如何读取属性值到组件类。

typescript
import { Component, Input, OnInit } from '@angular/core';
@Component({
  selector: 'app-child',
  template: <code>
    <h2>Child Component</h2>
    
Input Value: {{ inputValue }}
  </code>
})
export class ChildComponent implements OnInit {
  @Input() inputValue: string;
  ngOnInit() {
    console.log('Input Value:', this.inputValue);
  }
}

在上面的例子中，我们定义了一个名为ChildComponent的组件类。该组件具有一个名为inputValue的属性，并使用@Input装饰器标记该属性。然后，在ngOnInit方法中，我们使用this.inputValue来访问该属性的值，并将其打印到控制台中。

如何绑定属性值

要将属性值绑定到组件类，我们需要在父组件中使用属性绑定语法将属性值传递给子组件。

下面是一个示例，展示了如何绑定属性值到ChildComponent。

html
<app-child [inputValue]="parentValue"></app-child>

在上面的例子中，我们使用属性绑定语法将父组件的parentValue属性的值传递给子组件的inputValue属性。

在本文中，我们学习了如何在Angular2中使用typescript读取和绑定属性值到组件类。我们了解了ngOnInit方法的作用和使用@Input装饰器来读取属性值的方法。我们还学习了如何使用属性绑定语法将属性值传递给子组件。

希望本文对你理解如何读取和绑定属性值到组件类有所帮助！