获取输入值 angular - Javascript

在Angular中，获取输入值是非常常见的操作。下面提供两种方法来获取输入值。

通过@Input装饰器获取

@Input装饰器是Angualr提供的一种获取父组件传递的输入值的方式。

在子组件的类中，使用@Input装饰器来定义输入属性。例如：

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

@Component({
  selector: 'child-component',
  template: `<p>{{message}}</p>`
})
export class ChildComponent {
  @Input() message: string;
}

在父组件中，使用以下方式向子组件传递输入值。

<child-component [message]="Hello World"></child-component>

通过ViewChild获取

有时候我们需要获取子组件的输入值。这时候可以使用ViewChild来获取子组件实例。

import { Component, ViewChild } from '@angular/core';
import { ChildComponent } from './child.component';

@Component({
  selector: 'parent-component',
  template: `<child-component #childComponent></child-component>`
})
export class ParentComponent {
  @ViewChild('childComponent') childComponent: ChildComponent;  
  ngAfterViewInit() {
    console.log(this.childComponent.message);    
  }
}

以上就是两种获取输入值的方式。通过@Input装饰器获取是一个相对简单的方法，而通过ViewChild获取则略微复杂一些。在实际开发中，根据需求可以选择灵活使用。