输入设置变量 angular - Javascript

在 Angular 中，可以使用 ngModel 指令来实现双向数据绑定。但还有许多其它的场景需要手动去设置变量来实现某些功能，比如在组件之间共享数据。本文将介绍在 Angular 中如何手动设置变量。

快速上手

我们先来看一个简单的例子。假设我们有两个组件 ParentComponent 和 ChildComponent，它们的关系是 ParentComponent 包含 ChildComponent。

我们希望在 ParentComponent 中定义一个变量 parentValue，然后在 ChildComponent 中引用这个变量。我们可在 ParentComponent 中将 parentValue 通过 @Input 装饰器暴露出去，然后在 ChildComponent 中通过 @Input 装饰器来接收 parentValue。

下面是代码实现：

// ParentComponent
import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    <app-child [childValue]="parentValue"></app-child>
  `
})
export class ParentComponent {
  parentValue = 'Hello';
}

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

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

上述代码中，我们在父组件 ParentComponent 中定义了变量 parentValue，并通过 @Input 装饰器将其暴露给子组件 ChildComponent。在子组件 ChildComponent 中，我们通过 @Input 装饰器来接收变量 parentValue。

更多用法

Angular 中的 @Input 装饰器可以用于以下场景：

单向绑定

与上述例子相似，我们可以将变量暴露给子组件，然后在子组件中只读地使用它。

// ParentComponent
import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    <app-child [childValue]="parentValue"></app-child>
  `
})
export class ParentComponent {
  parentValue = 'Hello';
}

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

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

双向绑定

除了单向绑定，我们还可以使用 [(ngModel)] 指令来实现双向绑定。但是，当需要在组件之间共享某个变量时，双向绑定就显得不太实用了。在这种情况下，我们可以将变量定义在外层组件中，通过 @Input 装饰器进行单向绑定，然后在子组件中使用 $event.target.value 将变更事件传递到外层组件中。

// ParentComponent
import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    <app-child [childValue]="parentValue" (childValueChange)="parentValue = $event"></app-child>
  `
})
export class ParentComponent {
  parentValue = 'Hello';
}

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

@Component({
  selector: 'app-child',
  template: `
    <input type="text" [value]="childValue" (input)="onChildValueChanged($event.target.value)">
  `
})
export class ChildComponent {
  @Input() childValue: string;
  @Output() childValueChange = new EventEmitter<string>();

  onChildValueChanged(value: string) {
    this.childValueChange.emit(value);
  }
}

上述代码中，我们在父组件 ParentComponent 中定义了变量 parentValue，并通过 @Input 装饰器将其暴露给子组件 ChildComponent。在子组件 ChildComponent 中，我们通过 $event.target.value 将变化事件传递给 ChildComponent，再通过 EventEmitter 将变化事件传递回去。这里需要注意的是，我们在 @Output 装饰器后加上 Change 来定义变更事件的名称，这是约定俗成的写法。

路由参数传递

在使用 Angular 路由时，有时需要将一些参数从父路由传递给子路由。此时，我们可以使用 @Input 装饰器将参数暴露给子组件。如下所示：

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <router-outlet></router-outlet>
  `
})
export class AppComponent {
  title = 'app';
}

// parent.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    <app-child [childValue]="parentValue"></app-child>
  `
})
export class ParentComponent {
  parentValue = 'Hello';
}

// child.component.ts
import { Component, Input } from '@angular/core';

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

上述代码中，我们在父路由 ParentComponent 中定义了变量 parentValue，并将其通过 @Input 装饰器传递给子路由 ChildComponent。在子路由中，我们可以直接使用 childValue。

总结

Angular 中的 @Input 装饰器可以用于将变量从父组件暴露给子组件。我们可以通过单向绑定、双向绑定和路由参数传递来使用 @Input 装饰器。这一功能对于在组件之间共享数据非常有用，希望本文对你有所帮助。