我正在尝试创建具有其ng-content的自定义primeNG按钮。目的是如果给出了内容,则应使用它代替标准的pButton标签绑定。
这是我为该组件提供的基本代码:
<button pButton [label]="label">
<ng-content></ng-content>
</button>
这当然将始终显示标签和按钮中提供的ng含量。我只想在未提供内容的情况下看到标签。
我在这方面做了大量工作,包括尝试集成ngIf,使用ViewChild检查ng-content是否存在等,对您的帮助将不胜感激。
答案 0 :(得分:0)
您可以使用viewchild获取容器的引用,并检查元素是否已包含内容,并根据您的需要设置传递的标签值或自定义组件的投影值
custome组件将如下所示
@Component({
selector: 'c-btn',
templateUrl: './btn.component.html',
styleUrls: ['./btn.component.css']
})
export class BtnComponent {
@Input('label') staticLabel : string= "";
@ViewChild('content') projectedLabel: ElementRef;
get label () :string{
return this.projectedLabel.nativeElement.innerHTML.trim() || this.staticLabel
}
}
模板
<button pButton [label]="label" ></button>
<div #content style="display:none">
<ng-content ></ng-content>
</div>
将
ng-content
放在按钮元素的外面使检查它是否容易 有没有价值, 为什么必须将ng-content
放在按钮之外的另一个原因 它与primeng无关, pButton 在其中具有某种结构 订单按钮将显示为完整状态,因此在两种情况下都需要 使用带有标签属性的属性绑定
另一种方式
使用模板变量并检查元素是否具有内容,这可能是最简单的解决方案。
自定义元素
<button pButton [label]="content.innerHTML || label" ></button>
<div #content style="display:none">
<ng-content ></ng-content>
</div>
组件
export class BtnComponent {
@Input() label : string= "";
}
更新了⚡⚡
这将支持将html元素投影为html,而不是通过按钮内部的跨度更新作为按钮文本
组件
@Input('label') label : string= "";
@ViewChild('content') projectedLabel: ElementRef;
@ViewChild('btn') button: ElementRef;
ngAfterViewInit(){
if (this.projectedLabel.nativeElement.innerHTML){
const elm = this.button.nativeElement.querySelector('span');
elm.innerHTML = this.projectedLabel.nativeElement.innerHTML;
}
}
模板
<button pButton [label]="label" #btn></button>
<div #content style="display:none">
<ng-content ></ng-content>
</div>