Как исключить привязку, если дан нг-контент? - PullRequest
Новая
       5

Как исключить привязку, если дан нг-контент?

1 голос
/ 20 июня 2019

Я пытаюсь создать пользовательскую кнопку PrimeNG с собственным нг-контентом. Цель состоит в том, чтобы при предоставлении содержимого его использовали вместо стандартной привязки метки pButton.

Это основной код, который я придумал для этого компонента: 

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

Это, конечно, всегда будет отображать как метку, так и нг-контент, представленный в кнопке. Я хочу видеть ярлык только в том случае, если контент не предоставлен.

Я решил несколько кроличьих дыр, в том числе пытался интегрировать ngIf, используя ViewChild для проверки существования ng-контента и т. Д. Любая помощь будет принята с благодарностью.

1 Ответ

0 голосов
/ 23 июня 2019

вы можете получить ссылку на контейнер с помощью viewchild и проверить, есть ли у элемента уже содержимое или нет, и на основании того, что вы задали значение переданной метки или прогнозируемое значение, пользовательский компонент будет выглядеть так

компонент customme будет выглядеть следующим образом 

@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 имеет некоторую структуру, чтобы кнопка выглядела как введенная, поэтому в обоих случаях вам нужно использовать привязку свойства со свойством label

иначе

Это может быть простейшее решение с помощью переменной шаблона и проверки, имеет ли элемент содержимое или нет.

элемент обычного 

<button pButton [label]="content.innerHTML || label" ></button>

<div #content style="display:none">
    <ng-content ></ng-content>
</div>

компонент 

export class BtnComponent  {

  @Input() label : string= "";  
}

демо ??

Обновлен⚡⚡

Это будет поддерживать проекцию в виде 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>

демо ?

...