如何解决角度指令-动态创建组件并包装内容
我想要什么:
实际可行的简约工具提示-看着您PrimeNG
我所拥有的:
import {Component,Input} from '@angular/core';
@Component({
selector: 'lib-tooltip',template: '<div class="tooltip-parent">
<ng-content></ng-content>
<div class="tooltip">
{{label}}
</div>
</div>',styles: ['
.tooltip-parent {
position: relative;
.tooltip {
display: none;
position: absolute;
font-size: smaller;
z-index: 1014;
background: rgb(73,80,87,0.8);
color: #ffffff;
padding: 0.5rem 0.5rem;
Box-shadow: 0 2px 4px -1px rgba(0,0.2),0 4px 5px 0 rgba(0,0.14),0 1px 10px 0 rgba(0,0.12);
border-radius: 3px;
}
&:hover {
.tooltip {
display: block;
}
}
}
'],})
export class TooltipComponent {
@input() label: string;
}
我可以这样使用:
<lib-tooltip label="this as tooltip">
<li>Should have tooltip</li>
</lib-tooltip>
接下来是什么?
我想要一个指令,即<li customtooltip [tooltiplabel]="this as tooltip">Should have tooltip</li>
动态生成工具提示组件(ViewContainerRef.createComponent()或createEmbeddedView ??)-我知道如何设置两者,但是我无法将任何html内容(无论我希望将我的工具提示应用于什么)投影到我的ng中-内容出口
<div class="tooltip-parent">
<ng-content></ng-content> <---------
<div class="tooltip">
{{label}}
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。