在Angular 7组件之间共享数据

Question

我想将数据从age组件的输入child-information发送到包含垂直线的age-line组件。获得年龄后，该行向左移'age * 100 pixels'。

我的代码怎么了？没有错误消息。

Child-inf.html：

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

Child-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

在Angular中，当您需要从子组件向子-父关系中的子组件发送一个值给他的父母时，使用Output()。>

我看不到Age line组件的子级Child-inf。

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

Age行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中监听：

Age行html：

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