从孩子到父母的角度信号结果

Question

在 Angular 中，我一直使用事件发射器将数据从子组件传递到父组件，以通知父组件更新我从子组件共享到父组件的数据。现在 Angular 中已经提供了 Signal，我可以使用 Signal 来实现这一目标吗？我在网上找不到任何例子。请帮忙

Answer 1

是的，我们可以使用信号

使用输入角度为 17 的信号的示例

子组件

@Component({
  selector: 'app-home',
  template: `
  <p>Name: {{ username() }}</p>
    <p>Active: {{ isActive() }}</p>`,
  standalone: true,
})
export class HomeComponent {
  @Input({ required: true }) username!: Signal<string>;
  @Input({ required: true }) isActive!: Signal<boolean>;
}

父组件

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [HomeComponent],
  template: `
    <app-home [username]="username" [isActive]="isActive" />

    <button (click)="setUsername()"> Set username </button>
  `,
})
export class App {
  username = signal('Hussein');
  isActive = signal(false);

  setUsername(): void {
    this.username.set(Date.now().toString());
  }
}

实例 https://stackblitz.com/edit/stackblitz-starters-fn5rhh?file=src%2Fmain.ts

但它仍然有限，我个人不使用它

但在下一个角度版本之一中，我们将能够将组件标记为信号

signal: true

，就像

standalone: true

检查这个https://github.com/angular/angular/discussions/49682