Question

我正在尝试创建具有其ng-content的自定义primeNG按钮。目的是如果给出了内容，则应使用它代替标准的pButton标签绑定。

这是我为该组件提供的基本代码：

<button pButton [label]="label">
  <ng-content></ng-content>
</button>

这当然将始终显示标签和按钮中提供的ng含量。我只想在未提供内容的情况下看到标签。

我在这方面做了大量工作，包括尝试集成ngIf，使用ViewChild检查ng-content是否存在等，对您的帮助将不胜感激。

Answer 1

您可以使用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>

demo ??

将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= "";  
}

demo ??

更新了⚡⚡

这将支持将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>

demo ?

如果给出ng-content，如何排除绑定？

1 个答案: