Отправка данных из динамически добавленного дочернего компонента в родительский компонент
Я добавляю дочерний компонент динамически к родителю. Теперь в дочернем компоненте есть метод, который должен передавать значения обратно родителю, который, в свою очередь, сохраняет его в локальной переменной. Но я получаю "неопределенную" ошибку. Это работает, если я добавляю дочерний компонент в шаблон через его селектор.
Ошибка заключается в том, что метод, который принимает испущенные данные от дочернего компонента, не может получить доступ к переменным класса (this.save_data), говоря, что "save_data" не определено. Похоже, что он ищет "save_data" в дочернем comopnent, когда он определен в родительском comopnent и доступен с помощью метода в родительском компоненте, который показан в нижней части.
Надеюсь, у меня есть смысл.
Дочерний компонент:
@Component({
selector: 'tr[child-component]',
templateUrl: './stock-item-form.component.html'
})
export class ChildComponent implements OnInit {
@Input() unique_id:string='';
@Output() eventActionHandler=new EventEmitter<any>();//
item_brand: FormControl;
constructor() {}
saveRow(event){
//emits valid data to the parent
if(this.item_brand.valid){
let data={'action':'add','data':{}}
data['data']['brand']=this.item_brand.value;
this.eventActionHandler.emit(data);
}
}
ngOnInit() {
this.item_brand = new FormControl('', [Validators.required]);
}
}
child.component.html:
<td>
<input type="text" class="form-control" [formControl]="item_brand"> <a href="#" (click)="saveRow($event)"><i class="fa fa-save"></i></a>
<div class="alert" *ngIf="!item_brand.valid && item_brand.touched">Enter brand or Unknown</div>
</td>
Теперь родительский компонент (разделен, чтобы показать только соответствующий код). ошибка теперь в методе emmitedNewAction, который не может получить доступ к this.saved_data
создайте дочерний компонент напрямую:
saved_data:any[]=[];
@ViewChild('stockin_items_containair', {read: ViewContainerRef}) stockin_items_containair: ViewContainerRef; //dynamic stocked in item goes here
addNewChildComponent(){
//create the child component then subscribe an event to it:
let instance=this.stockin_items_containair.createComponent(this.childComponent);
instance.instance['eventActionHandler'].subscribe(this.emittedNewRowAction);
}
emittedNewRowAction($event){
//data sent from saveRow metod of child component and source of error
console.log($event)
console.log(this.saved_data);//saved_data undefined
}