Блог

Я пытаюсь передать значение дочернего компонента, но я запутался, как передать выделение от дочернего компонента родительскому. Дочерний компонент работает нормально, но данные родительскому компоненту не передаются. Насколько я понимаю, мне не нужно объявлять источник события — просто используйте аннотацию @Output(). Это неправильно?

РАБОТАЕТ (я вижу изменение свойства lgselected):

Дочерний HTML:

 {{lgselected.shortName}}
<mat-form-field>
    <mat-select [(ngModel)]="lgselected">
        <mat-option *ngFor="let s of lglist$" [value]="s">{{s.shortName}}</mat-option>
    </mat-select>
</mat-form-field>
  

Дочерний TS

 lgselected: LicenseGroup;
  

НЕ РАБОТАЕТ (нет вывода на консоль при изменении дочернего компонента):

родительский html:

 <lgselector (lgselected)="lg"></lgselector>
  

родительский компонент:

 @Input() set lg(lg: LicenseGroup) {
    this._lg = lg;
    console.log('lg updated: '   this._lg.id)
}
  

Дочерний компонент

Прежде всего, вам нужно установить lgselected как @Output() и EventEmmiter()

 @Output() lgselected = new EventEmmiter();
  

Затем вам нужно emit присвоить значение (changes)

Таким образом, вы добавите его в mat-select

 <mat-select (change)="change($event)">
  

Затем вы можете настроить change метод в дочернем компоненте

 change(event) {
  console.log(event);
  lgselected.emit(event);
}
  

Родительский компонент

В родительском компоненте просто вызовите метод при emit

 <lgselector (lgselected)="somethingChanged($event)"></lgselector>
  

Создайте этот метод в *.component.ts

 somethingChanged(event) {
   console.log(event);
}
  

Здесь вам это не нужно @Input() .

Для лучшего понимания взаимодействия компонентов взгляните сюда