时间戳

首页 > 解决方案 > 如何在Angular 8中将动态数据从父级传递给子级ng-content

angular - 如何在Angular 8中将动态数据从父级传递给子级ng-content

问题描述

我有一个组件弹出。这是一个简单的组件，您可以将您希望从网页一侧飞出的任何内容/组件包装起来。我们用它来上传文件。该组件使用广播服务来侦听告诉它何时显示和何时隐藏的消息。它使用内容投影(<ng-content></ng-content>)来允许您将任何内容传递给它。如何将数据从父容器传递 (e.g., <flyout> )到动态的子组件 - 意思是，弹出的子组件总是不同的。

弹出组件：

<div [ngClass]="{ 'open': show }" class="offcanvas-collapse" [attr.aria-hidden]="show ? 'false': 'true'">
    <div class="w-100 d-flex justify-end pv2">
      <button class="btn button-secondary-link" type="button" (click)="closeFlyout()">
        <span class="nav-text h5 mb0 underline fw7">Close</span>
      </button>
    </div>
    <ng-content></ng-content>
</div>

我阅读了有关 ng-template-outlet 的信息，但为了使弹出组件具有通用性（因此您可以将其包裹在任何组件/内容周围并将该组件/内容转换为弹出窗口），我们使用内容投影。这些 ng-template-outlet 方法看起来像弹出窗口需要了解其潜在子项的一些信息，这使得它不太灵活。

我正在寻找其他可能的方法来实现这一目标。谢谢

标签： angularangular8angular-ui

解决方案

推荐阅读