从第 n 个孩子 2 到父母的角度输出变量答案

【问题标题】：angular output variable to parent from nth child two从第 n 个孩子 2 到父母的角度输出变量
【发布时间】：2020-05-25 06:25:14
【问题描述】：

我需要向/从两个孩子输入和输出变量

我的父母
deposit.component.html

<div>
    <app-new-or-update-deposit [(isOpenedModal)]="isOpenedModal"></app-new-or-update-deposit>
</div>

deposit.component.ts

...
export class DepositsComponent implements OnInit {

  public isOpenedModal = false;

  constructor() { }
  ngOnInit() {}

  openModal() {
    this.isOpenedModal = true;
  }
}

我的第一个孩子
new-or-update-deposit.component.html

<app-modal [(isOpenedModal)]="isOpenedModal">
    <div body>
        Body content
    </div>
    <div footer>
        Footer content
    </div>
</app-modal>

new-or-update-deposit.component.ts

...
export class NewOrUpdateDepositComponent implements OnInit {

  @Input() isOpenedModal: boolean;
  @Output() isOpenedModalChange: EventEmitter<boolean> = new EventEmitter<boolean>();

  constructor() { }
  ngOnInit() { }
}

我的两个孩子
modal.component.html

<div class="modal fade" [ngClass]="isOpenedModal ? 'show modal-block' : ''" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" (click)="close()">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <ng-content></ng-content>
        </div>
    </div>
</div>
<div class="modal-backdrop fade show" *ngIf="isOpenedModal"></div>

modal.component.ts

...
export class ModalComponent implements OnInit {

  @Input() isOpenedModal: boolean;
  @Output() isOpenedModalChange: EventEmitter<boolean> = new EventEmitter<boolean>();

  constructor() { }
  ngOnInit() { }

  close() {
    this.isOpenedModalChange.emit(false)
  }
}

好的，我解决了它
在 new-or-update-deposit.component.html

<app-modal [(isOpenedModal)]="isOpenedModal" (isOpenedModalChange)="onIsOpenedModalChange($event)">
    <div body>
        Body content
    </div>
    <div footer>
        Footer content
    </div>
</app-modal>

因为 isOpenedModalChange 是我可以调用函数的事件

在 new-or-update-deposit.component.ts

...
export class NewOrUpdateDepositComponent implements OnInit {

  @Input() isOpenedModal: boolean;
  @Output() isOpenedModalChange: EventEmitter<boolean> = new EventEmitter<boolean>();

  constructor() { }
  ngOnInit() { }

  onIsOpenedModalChange(value) {
    this.isOpenedModalChange.emit(value);
  }
}

【问题讨论】：

不要在不相关的问题中添加标签。你的问题是关于angular，而不是angularjs。
您可以改为在存款组件级别提供服务，然后将其注入子代。模态组件只需要订阅此服务上的一个可观察对象，该服务将在服务上引发点击事件时打开它。同样，当模式关闭并且对此事件感兴趣的任何人都可以订阅它时，您可以在此服务上引发一个事件。这是这种方法的一个例子stackblitz.com/edit/…
Rxjs 主题在这里对你有用

标签： angular typescript rxjs angular8

【解决方案1】：

您可以通过在事件通过的每个组件上处理和发出事件来尽可能地冒泡您自己的事件。

parent.html

<app-child (myevent)="onMyEvent($event)">
</app-child>

child.ts

@Output() myEvent: EventEmitter<boolean> = new EventEmitter<boolean>();

onMyEvent(e: number): void {
  this.myEvent.emit(e);
}

child.html

<app-grand-child (myevent)="onMyEvent($event)>
</app-grand-child>

等等等等

【讨论】：