在 Angular 7 组件之间共享数据

Question

我想将来自child-information 组件的age 输入的数据发送到包含垂直线的组件age-line。当它到达年龄时，这条线向左移动'age * 100 pixels'。

我的代码有什么问题？没有错误消息。

Child-inf.html：

 <button id="okButton" (click)=addAge()>OK</button>
 Age : <input 
 type="text" name="Age" value="Kor" id="ageId" onfocus="this.value = 
 this.value=='Kor'?'':this.value;" onblur="this.value = 
 this.value==''?'Kor':this.value;">

子-inf.ts：

export class ChildInformationsComponent implements OnInit {
 age:number = 1;
  @Output() buttonClicked: EventEmitter<number> = new EventEmitter<number>();
  constructor(private el: ElementRef) { }

  ngOnInit() { }

  addAge(){
    this.age =parseInt((<HTMLInputElement>document.getElementById('ageId')).value);
    this.buttonClicked.emit(this.age); 
  }
}

年龄线html：

 <div class="age-line" [style.left.px]="age * 100"> <div class="line"></div> </div>

年龄线 ts：

export class AgeLineComponent implements OnInit {

 constructor() { }
 age: number= 1;


 showNextComponent(emittedAge: number) {
   this.age = emittedAge;
   console.log('Button clicked');
 }

 ngOnInit() { }

}

Answer 1

您似乎缺少 Age Line HTML

中的子组件

您的输出按钮已单击，因此您的代码需要看起来像这样。

年龄线 HTML：

<div class="age-line" [style.left.px]="age * 100"> <div class="line"></div> </div>
<child-inf (buttonClicked)="showNextComponent($event)"></child-inf>

现在，当您发出 buttonClicked 时，showNextComponent 方法将触发。

您还应该从 AgeLine.ts 扩展 Child-inf.ts。

export class ChildInformationsComponent extends AgeLineComponent{
    // Methods and stuff
}

Answer 2

在 Angular 中，当您需要在子-父关系中从子组件向其父级发出值时，您可以使用 Output()。

我没有看到 Age line 组件作为子组件具有 Child-inf。

如果您希望Child-inf 和Age line 具有子父关系，则应在Age line Html 中包含Child-inf。

年龄线 html：

<div class="age-line" [style.left.px]="age * 100"> <div class="line"></div> </div>
<child-inf></child-inf>

这里我假设Child-inf组件选择器是：child-inf

那么如果你想在Child-inf 组件中监听输出事件，在Age line html 中你必须这样做：

年龄线 html：

<div class="age-line" [style.left.px]="age * 100"> <div class="line"></div> </div>
<child-inf (buttonClicked)="showNextComponent($event)"></child-inf>