将 ng-content 传递给子组件
Pass ng-content to child component
感谢您的宝贵时间。
我有三个组成部分:
- 主页组件
- 使用
angular/cdk/overlay
overlay.create
创建第三个组件的按钮
- 附在显示文字的按钮上的小框
目标是在用户单击按钮时显示有关页面的信息。我不能使用 @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>
您可以使用内容投影将 html 从主组件传递到小框组件。请按照此link了解如何使用内容投影https://www.infragistics.com/community/blogs/b/infragistics/posts/simplifying-content-projection-in-angular
如果有人来到这里,供将来参考,这可能会有所帮助 -
https://stackblitz.com/edit/angular-ivy-apjclv?file=src/app/child/child.component.html
编辑:
基本上,您在容器中寻找的是:
<app-parent>
<span> some content from container </span>
</app-parent>
并在 parent 中:
<app-child>
<ng-content select="[foo]" ngProjectAs="[foo]"> </ng-content>
</app-child>
并在 child 中:
<ng-content select="[foo]"> </ng-content>
可以在 parent 中添加内容,但您需要将其拆分为:
<ng-container ngProjectAs="[foo]">
<span>some parent content</span>
<ng-content select="[foo]"></ng-content>
<ng-container>
编辑 2:所以我对传递 TemplateRefs 很着迷,以便能够从投影内容的组件访问变量(在这些示例中又称为 'parent')。然而,访问比 'parent' 更深的变量是站不住脚的。如果您需要访问 child 变量,那么我建议改用 service/observable /重新考虑您的结构。
TemplateRef 示例,使用上面相同的 container/parent/child 结构:
// 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>
感谢您的宝贵时间。
我有三个组成部分:
- 主页组件
- 使用
angular/cdk/overlay
overlay.create
创建第三个组件的按钮 - 附在显示文字的按钮上的小框
目标是在用户单击按钮时显示有关页面的信息。我不能使用 @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>
您可以使用内容投影将 html 从主组件传递到小框组件。请按照此link了解如何使用内容投影https://www.infragistics.com/community/blogs/b/infragistics/posts/simplifying-content-projection-in-angular
如果有人来到这里,供将来参考,这可能会有所帮助 - https://stackblitz.com/edit/angular-ivy-apjclv?file=src/app/child/child.component.html
编辑:
基本上,您在容器中寻找的是:
<app-parent>
<span> some content from container </span>
</app-parent>
并在 parent 中:
<app-child>
<ng-content select="[foo]" ngProjectAs="[foo]"> </ng-content>
</app-child>
并在 child 中:
<ng-content select="[foo]"> </ng-content>
可以在 parent 中添加内容,但您需要将其拆分为:
<ng-container ngProjectAs="[foo]">
<span>some parent content</span>
<ng-content select="[foo]"></ng-content>
<ng-container>
编辑 2:所以我对传递 TemplateRefs 很着迷,以便能够从投影内容的组件访问变量(在这些示例中又称为 'parent')。然而,访问比 'parent' 更深的变量是站不住脚的。如果您需要访问 child 变量,那么我建议改用 service/observable /重新考虑您的结构。
TemplateRef 示例,使用上面相同的 container/parent/child 结构:
// 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>