初始化子级后,将值从“子级”组件传递到“父级”组件

时间:2019-04-03 16:25:15

标签: angular typescript angular-components

现在,我在单击“发送”按钮时将值从子级传递给父级,如何初始化子级传递相同的数组,我尝试使用“ ngAfterViewInit”,但没有用,这里有任何建议。

      child
    @Component({
        selector: 'app-child',
        templateUrl: './child.component.html'
    })
    export class ChildComponent {

        cars = ["Saab", "Volvo", "BMW", "BMW", 'Saab'];

        @Output() msEvent = new EventEmitter();

        constructor() {}

        send() {

            this.msEvent.emit(this.cars);
        }

        // ngAfterViewInit() {

        //   this.msEvent.emit(this.cars);
        // }
    }

    }
        child.component.html : <button (click) = 'send()' class="button">send</button>
    ----------------------------------------

    parent
  @Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {

  cars:any[];

  constructor() {

  }
  rece($event) {
    this.cars = $event;
  }
}
    app.component.html : <app-child (msEvent) = 'rece($event)' [employees] = 'employees'></app-child>

2 个答案:

答案 0 :(得分:0)

您可以尝试以下代码

ngAfterViewChecked():生命周期挂钩,在默认变更检测器完成检查组件视图中的变更后调用。

ngAfterViewChecked(){
    console.log(`ngAfterViewChecked---`);
    this.msEvent.emit(this.cars);
}

答案 1 :(得分:0)

ngOnInit()应该足以满足您的情况,因为传递的数据不依赖于“视图”。 在这里检查:StackBlitz example