如何创建使用组件标记的内容而不是输入的角分量
如何创建使用组件标记的内容而不是输入的角分量
提问于 2022-11-24 13:07:06
我想要创建一个节组件，它接受开始标记和结束标记之间指定的html，并添加一个标头。我希望这样做的主要原因是确保整个站点的页眉和内容的边距是一致的。我试着找出如何做到这一点，但我真的不知道如何制定问题，以得到我需要的答案。下面是我正在寻找的组件html用法和结果的示例
用法：
<custom-component [headerText]='example text'>
<button>example content</button>
</custom-component>结果：
<custom-component
<div>
<h1>example text</h1>
<button>example content</button>
</div>
</custom-component>回答 2
Stack Overflow用户
发布于 2022-11-24 13:44:28
您可以使用类似于本示例的@ use ()定义和html定义。@ templateRef类型的输入()允许您使用html代码或字符串文字，如在html使用示例中所见
@Input() title: TemplateRef<any>;
@Input() titleOptions: TemplateRef<any>;
@Input() actions: TemplateRef<any>;<mat-card >
<mat-card-header >
<mat-card-title>
<ng-container *ngTemplateOutlet="title">
</ng-container>
<ng-container *ngTemplateOutlet="titleOptions">
</ng-container>
</mat-card-title>
</mat-card-header>
<mat-card-content >
<ng-content> // Here puts html between your start and end tags component
</ng-content>
</mat-card-content>
<mat-card-actions >
<ng-container *ngTemplateOutlet="actions">
</ng-container>
</mat-card-actions>
</mat-card>
这就是我如何使用它的一个例子。
<ng-template #title>Custom Title here</ng-template>
<ng-template #actions>
<button color="action" mat-dialog-close mat-raised-button>Cancel</button>
<button (click)="submit()" class=" mr-3 ml-3" color="accent" form="form"
mat-raised-button>
Submit
</button>
</ng-template>
<app-common-layout-dialog
[actions]="actions"
[title]="title">
<h1> Here put everything I need to use inside content section </h1>
</app-common-layout-dialog>
事实上，我也定义了@ but () templateRef内容，但是我删除了它，以向您展示一个类似于您的请求的示例
Stack Overflow用户
发布于 2022-11-24 14:13:30
您可以利用角内容投影(请参阅正式文档这里)。
假设我们有ParentComponent和ChildComponent
parent.component.html
<app-child-component>
<p question>
Is content projection cool?
</p>
<p>Let's learn about content projection!</p>
</app-child-component>child.component.html
<h2>Multi-slot content projection</h2>
Default:
<ng-content></ng-content> <!-- Will print "<p>Let's learn about content projection!</p>" -->
Question:
<ng-content select="[question]"></ng-content> <!-- Will print "<p>Is content projection cool?</p>" -->您可以使用<ng-content></ng-content>打印<app-child-component>标记中的内容
您可以使用<ng-content select="[tag]"><ng-content>选择特定的内容。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74561297
复制相关文章
相似问题
腾讯云开发者
