如何更改“启动"切换按钮“角度"中的“标签"? [英] how to change Labels in primeng toggle button Angular?

问题描述

我有信息按钮作为组件.我想将其多次与不同的标签一起使用.Primeng具有onLabel属性，但在父组件中不起作用.可能有人知道该怎么做?

I have info button as component. And I want to use it more than one time with different Labels. Primeng has onLabel attribute, but it doesnt work in parent component. May be somebody know how to do that?

info-button.component html:

<p-toggleButton
    onIcon="pi pi-info"
    offIcon="pi pi-times">i</p-toggleButton>

ts

@Component({
  selector: 'app-infobutton',
  templateUrl: './info-icon.component.html',
  styleUrls: ['./info-icon.component.css']
})
export class IconComponent implements OnInit {
  @Input()
  onLabel: string;

  constructor() { }

  ngOnInit() {
  }
}

我在某些组件中调用信息按钮，不止一个 some.component html:

I call info button in some component, more than ones some.component html:

<app-infobutton class="col-1" [onLabel]="'text'" ></app-infobutton>
<app-infobutton class="col-1" [onLabel]="'text2'" ></app-infobutton>

ts:

export class ParentComponent implements OnInit{
  text: string = "some text";
  text2: string = "another text";
}

我将此一些文本"作为属性.不喜欢标签.

this 'some Text' I get as attribute. not like label.

输出

<app-infoicon _ngcontent-cee-c3="" class="col-1" _nghost-cee-c5="" ng-reflect-on-label="some Text" <!--this is my output-->>
   <div _ngcontent-cee-c5="" class="info-icon icon-default">
      <p-togglebutton _ngcontent-cee-c5="" officon="pi pi-times" onicon="pi pi-info" ng-reflect-on-icon="pi pi-info" ng-reflect-off-icon="pi pi-times">
           <div class="ui-button ui-togglebutton ui-widget ui-state-default ui-corner-all ui-button-text-icon-left ui-state-active" ng-reflect-ng-class="[object Object]">
               <span class="ui-button-text ui-unselectable-text">Yes <!--this is Label--></span></div>
       </p-togglebutton>
    </div>
 </app-infoicon>

推荐答案

只需扩展模板即可

<p-toggleButton
    [onLabel]="onLabel"
    onIcon="pi pi-info"
    offIcon="pi pi-times">i</p-toggleButton>

这篇关于如何更改“启动"切换按钮“角度"中的“标签"?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！