Question

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

信息按钮.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：

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

我将此“一些文本”作为属性。不喜欢标签。

输出

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

Answer 1

只需像这样扩展您的模板

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

Answer 2

我假设您正在使用PrimeNg组件库，因为这是我使用选择器<p-togglebutton>找到的第一个库

基于文档，为了能够显示标签，您必须将label属性传递给组件，如下所示：

<p-toggleButton onLabel="I confirm"></p-toggleButton>

因此，根据您的示例，我假设您必须将您的label属性传递给这样的组件：

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

如何更改启动按钮Angular中的标签？

2 个答案: