如何使用 ng-content 将变量/成员变量从 PARENT 传递给 CHILD答案

【问题标题】：How to pass variables/member variables from PARENT TO CHILD using ng-content如何使用 ng-content 将变量/成员变量从 PARENT 传递给 CHILD
【发布时间】：2020-08-06 01:35:16
【问题描述】：

我有一些这样的组件：

detail-component.ts

<app-base-modal>
 <app-body></app-body>
</app-base-modal>

在我的基础模态组件.ts 我有这个：

base-modal.component.ts

@Component({
  selector: 'app-base-modal',
  template: `
    <div class="modal fade" bsModal #staticModal="bs-modal" [config]="{backdrop: 'static'}" tabindex="-1" role="dialog" aria-labelledby="dialog-static-name">
            <button type="button" class="close pull-right" aria-label="Close" (click)="staticModal.hide()">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <ng-content></ng-content>
          </div>
    </div>
  `
})
export class BaseModalComponent implements OnInit {

  @ViewChild('staticModal', { static: true })
  staticModal: ModalDirective;

  @Input()
  toShowModal: BehaviorSubject<boolean> = new BehaviorSubject(false);

  modalIsHidden = false;

  constructor(private modalService: BsModalService) { }

  ngOnInit() {
    this.toShowModal.subscribe(t => {
      if (t) {
        this.staticModal.show();
      }
    });

    this.staticModal.onHidden.subscribe(() => {
      this.modalIsHidden = true;
    })
  }

  closeModal() {
    this.staticModal.hide();
  }

}

我需要将closeModal 方法或modalIsHidden 传递给ng-content，以便对投影/子html 进行清理。

模态体组件或子组件如下所示：

body.component.ts

@Component({
  selector: 'app-body',
  template: `

  <section *ngIf="hasRespondedWithError || isReasonSubmitSuccessful">
    <p class="alert alert-danger" *ngIf="hasRespondedWithError">Something went wrong. Please try again later.</p>
    <p class="alert alert-success" *ngIf="isReasonSubmitSuccessful">Thank you! Please allow us to review your return and we will contact you soon</p>
  </section>

  <form (ngSubmit)="onSubmit()" [formGroup]="sForm">
    <div class="form-group">
      <textarea type="text" formControlName="reasonTextArea" name="reasonTextArea" placeholder="Return Reason" class="form-control"></textarea>
    </div>
    <div class="d-flex flex-row justify-content-end">
      <button type="submit" class="btn btn-primary ml-2">Submit</button>
    </div>
  </form>
`
})
export class BodyComponent {

  @Output()
  returnValueOrder = new EventEmitter<Order>();



  toShowLoading = false;
  hasRespondedWithError = false;
  isReasonSubmitSuccessful = false;

  constructor(private fooService: FooService) { }


  sForm = new FormGroup({
    reasonTextArea: new FormControl('', Validators.required)
  });




  onSubmit(): void {
    this.toShowLoading = true;
    this.fooService
      .createRequest(this.orderNumber, {
        order_id: this.orderId,
        reason: this.sForm.value.reasonTextArea
      })
      .subscribe((order: Order) => {
        this.returnValueOrder.emit(order);
      }, (err) => {
        this.toShowLoading = false;
        this.hasRespondedWithError = true;
      }, () => {
        this.toShowLoading = false;
        this.isReasonSubmitSuccessful = true;
      });
  }

}

所以在这里我需要检查/监听模式是否关闭，以便可以将isReasonSubmitSuccessful 和hasRespondedWithError 设置为false。

我读过this，但它太令人困惑了。令人困惑，因为 templateRef 需要在同一个文件中，所以我可以像 <template #temp></template> 一样使用井号引用它？

【问题讨论】：

标签： javascript angular angularjs-directive

【解决方案1】：

一种可能的解决方案可能是使用依赖注入机制：

首先确定你要通过什么：

export abstract class ModalContext {
  abstract closeModal();
}

然后将你的父组件与 DI 解耦：

base-modal.component.ts

@Component({
  selector: "app-base-modal",
  template: `...`,
  providers: [
    {
      provide: ModalContext,
      useExisting: BaseModalComponent
    }
  ]
})
export class BaseModalComponent implements ModalContext, OnInit {
  ...
  closeModal() {
    ...
  }
}

最后，你可以在你的投影组件中使用这个ModalContext：

body.component.ts

@Component({...})
export class BodyComponent {
  ...
  
  constructor(... private modalContext: ModalContext) { }

  closeModal() {
    this.modalContext.closeModal();
  }
}

Forked Stackblitz

【讨论】：