需要将<ng-content [ value ]="Hello World"></ng-content>的值传递给父级

Question

尝试通过ng-content将值从子对象传递到父对象

父组件

<block-1>
 <block-2 [value]="{{I want this value from child}}"></block-2>
</block-1>

Block-1组件

<div *ngFor="let value form values">
   <ng-content {{I want to pass this value to parent {{value}}></ng-content>
</div>

Answer 1

使用带有@Output装饰器的EventEmitter将数据从子对象传递到父对象。

ChildComponent:

export class ChildComponent {
  @Output() str = new EventEmitter<string>();

  pass(str: string) {
    this.str.emit('Pass this string to parent');
  }
}

ParentComponent:

@Component({
  selector: 'app-parent',
  template: `
    <h2>Pass data?</h2>
    <app-child
      (str)="onPassed($event)">
    </app-child>
  `
})
export class ParentComponent {
  onPassed(str: string) {
    console.log(str);
  }
}

在循环<div *ngFor="let value form values">时触发事件(pass())。