[Angular]——父子组件传值

父子组件之间传值

装饰器@Input与@Output

父组件引用子组件，两个组件内部都是一个输入框

parent.component.html

<div style="border: darkred 1px solid; width: 50%;height: 50px; text-align: center;padding-top: 10px;">
  <label>parent：</label>
  <input nz-input #parentInput />
</div>
<div style=" text-align: center; ">
  <app-app-child [parentInput]="parentInput.value"></app-app-child>
</div>

** child.component.html**

<div style=" background-color: aqua; width: 50%;height: 50px; padding-top: 10px;">
  child：
  <input nz-input [placeholder]="parentInput" />
</div>

child.component.ts

export class AppChildComponent implements OnInit {
   
  // 输入性装饰器，用来接收父组件传来的同名参数
  @Input() parentInput: string;

  constructor() {
   }

  ngOnInit(): void {
   }
}

效果图
在父组件内的输入框键入，就会传入子组件，父组件在引入的子组件上用[paramName]='value’传值， <app-app-child [parentInput]=“parentInput.value”> 子组件用 @Input() parentInput: string 接收，

---

---

• 通过 setter 截听输入属性值的变化

Angular官网介绍
在父组件内定义一个数组，将通过setter方式传入子组件
parent.component.html

<div style="border: darkred 1px solid; width: 50%;height: 50px; text-align: center;padding-top: 10px;">
 parent：{
  {names}}
</div>
<div style=" text-align: center; ">
<!--ts中定义names数组，循环将name传入子组件中-->
  <app-app-child *ngFor="let name of names" [name]="name"></app-app-child>
</div>

parent.component.ts

  names = ['Dr IQ', '   ', '  Bombasto  '];

child.component.html

<div style=" background-color: aqua; width: 50%;height: 50px; padding-top: 10px;">
  child：{
  {name}}
</div>

child.componetn.ts

export class AppChildComponent {
   
  private _name = ''; // 定义私有变量name，用来转换传入的数据

  @Input()
  // 当参数name被传入，就会调用set方法，来进行判断和赋值
  set name(name: string) {
   
    this._name = (name && name.trim()) || '<no name set>';
  }
// 当有地方使用name参数，就会调用get方法进行输出
  get name