angular有偿编写，

Question

angular工程，加一个page，实现下面的功能：
写一个子组件，里面有一个label 和 一个输入框， label的表示内容是由外部传入的，当输入框内输入值后将这个值传递给父组件
父组件将输入的值输出在页面上
例如：
子组件: sub-input.component.ts
父组件：user-page.component.ts
例如.html, .css, .ts三类文件
父组件里
调用 2 次 子组件， 分别传入的label内容是：“姓名” 和 “电话号码”
一个按钮， 按钮名是“显示输入内容”， 点击后会显示上面输入的内容。
另一个按钮， 按钮名是“清除”， 点击后清除显示的内容。

Answer 1

AIGC生成：

---

Angular 有偿编写：实现子组件与父组件之间的数据传递

问题描述

您想在 Angular 工程中添加一个页面，包含一个子组件，该子组件拥有一个 label 和一个输入框。label 的内容是由外部传入的，当输入框内输入值后，将这个值传递给父组件，父组件将输入的值输出。

可能的解决方法

1. 使用 @Input 和 @Output decorator

在子组件中，使用 @Input decorator 将外部传入的值绑定到 label 中，然后使用 @Output decorator 将输入框的值传递给父组件。

// 子组件
import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
    <label>{{ label }}</label>
    <input type="text" [(ngModel)]="inputValue" (input)="emitInputValue()">
  `
})
export class ChildComponent {
  @Input() label: string;
  @Output() inputValue = new EventEmitter<string>();

  inputValue: string;

  emitInputValue() {
    this.inputValue.emit(this.inputValue);
  }
}

在父组件中，使用 @Input decorator 将子组件的值绑定到 label 中，然后使用 @Output decorator 将输入框的值传递给子组件。

// 父组件
import { Component } from '@angular/core';
import { ChildComponent } from './child.component';

@Component({
  selector: 'app-parent',
  template: `
    <app-child [label]="label" (inputValue)="handleInputValue($event)"></app-child>
    <p>输入的值：{{ inputValue }}</p>
  `
})
export class ParentComponent {
  label = '请输入值';
  inputValue = '';

  handleInputValue(value: string) {
    this.inputValue = value;
  }
}

1. 使用 ngModel 和 ngForm directive

在子组件中，使用 ngModel directive 将输入框的值绑定到一个变量中，然后使用 ngForm directive 将变量传递给父组件。

// 子组件
import { Component } from '@angular/core';
import { NgModel } from '@angular/forms';

@Component({
  selector: 'app-child',
  template: `
    <label>{{ label }}</label>
    <input type="text" [(ngModel)]="inputValue">
  `
})
export class ChildComponent {
  label: string;
  inputValue: string;
}

在父组件中，使用 ngForm directive 将子组件的值绑定到一个变量中，然后使用 ngModel directive 将变量传递给子组件。

// 父组件
import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';
import { ChildComponent } from './child.component';

@Component({
  selector: 'app-parent',
  template: `
    <app-child [label]="label" (ngModel)="handleInputValue($event)"></app-child>
    <p>输入的值：{{ inputValue }}</p>
  `
})
export class ParentComponent {
  label = '请输入值';
  inputValue = '';

  handleInputValue(value: string) {
    this.inputValue = value;
  }
}

1. 使用 RxJS 库实现数据流

在子组件中，使用 RxJS 库创建一个 observable，用于监听输入框的值变化，然后使用 subscribe 方法将值传递给父组件。

// 子组件
import { Component } from '@angular/core';
import { Observable, Observer } from 'rxjs';

@Component({
  selector: 'app-child',
  template: `
    <label>{{ label }}</label>
    <input type="text" (input)="emitInputValue($event.target.value)">
  `
})
export class ChildComponent {
  label: string;
  inputValue: Observable<string>;

  emitInputValue(value: string) {
    this.inputValue.next(value);
  }
}

在父组件中，使用 subscribe 方法将子组件的值传递给自己。

// 父组件
import { Component } from '@angular/core';
import { ChildComponent } from './child.component';

@Component({
  selector: 'app-parent',
  template: `
    <app-child [label]="label" (inputValue)="handleInputValue($event)"></app-child>
    <p>输入的值：{{ inputValue }}</p>
  `
})
export class ParentComponent {
  label = '请输入值';
  inputValue: string;

  handleInputValue(value: string) {
    this.inputValue = value;
  }
}

这些方法都可以实现子组件与父组件之间的数据传递，但是每种方法都有其优缺，需要根据实际情况选择合适的方法。