如果给出ng-content,如何排除绑定?

时间:2019-06-19 21:59:52

标签: angular primeng

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

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

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

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

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

1 个答案:

答案 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>

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 ?