将ng-content传递给子组件

Question

感谢您的时间。

我有三个组件：

1. 主页面组件
2. 一个按钮，使用angular/cdk/overlayoverlay.create来创建第三个组件
3. 附加到按钮上的小框，显示文本

目标是，在用户点击按钮时显示有关页面的信息。 我不能使用@Input，因为每个页面的信息格式（h1，p，组件）都会更改。

我的问题

如何将HTML从主组件传递到小框组件？

或者

如何截取ng-content的内容并将其发送到小框组件？

主要

<app-btn-info>
   <mat-icon>info</mat-icon>
   <h1>Test</h1>
   <p>This is a test</p>
</app-btn-info>

按钮

@Component({
  selector: 'app-btn-info',
  templateUrl: './btn-info.component.html',
  styleUrls: ['./btn-info.component.scss']
})
export class BtnInfoComponent {

  @ViewChild('button') button: MatIcon;

  constructor(private overlay: Overlay) { }

  public onClick() {
    this.overlay.create({
      positionStrategy: this.overlay.position().connectedTo(this.button._elementRef,
        { originX: 'start', originY: 'top' }, { overlayX: 'start', overlayY: 'top' }
      )
    });
  }

}

<button #button mat-icon-button color="warn" matTooltip="Choose an option" (click)="onClick()">
    <mat-icon>refresh</mat-icon>
</button>

小盒子

<!-- From Main Component - But open by BtnInfoComponent -->
<ng-content></ng-content> 

- marcXandre

---

小盒子组件用在主组件中吗？你能发一下你是怎么使用小盒子的，想传递哪些内容吗？ - Nikhil Walvekar

我编辑了@NikhilWalvekar的问题。 - marcXandre

Answer 1

如果有人以后访问这里，这可能会有所帮助 - https://stackblitz.com/edit/angular-ivy-apjclv?file=src/app/child/child.component.html

编辑：

基本上，您在容器中要查找的内容是：

<app-parent>
<span> some content from container </span>
</app-parent>

并且在父级元素中：

<app-child>
  <ng-content select="[foo]" ngProjectAs="[foo]"> </ng-content>
</app-child>

在此子元素中：

<ng-content select="[foo]"> </ng-content>

在父元素中可以添加内容，但您需要像这样拆分它：

<ng-container ngProjectAs="[foo]">
  <span>some parent content</span>
  <ng-content select="[foo]"></ng-content>
<ng-container>

---

编辑2：我过于热衷于传递TemplateRefs，以便能够从组件投影内容的组件（在这些示例中称为“父级”）中访问变量。然而，访问比“父级”更深的变量变得不可行。如果您需要访问子级变量，在这一点上，我建议使用服务/可观察对象或重新考虑您的结构。

TemplateRef示例，使用与上述相同的容器/父级/子级结构：

// parent-foo.component.ts
@Input() templateFooSelector?: TemplateRef<any>;

<!-- container.component.html -->
<app-parent [templateFooSelector]="containerTemplate"></app-parent>

<ng-template #containerTemplate let-parentFoo="parentFoo">
  <div *ngIf="parentFoo.bar"> ParentFoo has variable Bar: {{parentFoo.bar}} </div>
</ng-template>

<!-- parent.component.html -->
<app-child>
  <!-- this ngProjectAs is only necessary if the child uses a 'select="..." ` -->
  <ng-container ngProjectAs="[childSelector]">
    <!-- the ngIfs may be unnecessary, haven't tested without -->
    <ng-content *ngIf="!templateFooSelector" select="[fooSelector]"></ng-content>
    <ng-container *ngIf="templateFooSelector">
      <ng-container *ngTemplateOutlet="templateFooSelector; context: {parentFoo: this}">
      </ng-container>
    </ng-container>
  </ng-container>
<app-child>

- Josh Leslie

---

非常感谢你，你值得 +100。 - Moussa

非常顺利，完美 :D - Felipe Issa

Answer 2

您可以使用内容投影将主组件中的HTML传递到小框组件中。请参考此链接了解如何使用内容投影https://www.infragistics.com/community/blogs/b/infragistics/posts/simplifying-content-projection-in-angular

- Kuldeep Semwal

---

是的，我想这样做...但是有一个中间组件BtnInfoComponent，那么我该如何将它传递给小框呢？ - marcXandre