升级至 ng-zorro-antd 19 后 nz-segmented 不支持 nzLabelTemplate 指令
0
悬赏园豆：30
[已解决问题]
解决于 2024-12-09 11:08
对应的 component html 代码
<nz-segmented [(ngModel)]="selectedListTypeIndex" [nzOptions]="listTypeOptions"
[nzLabelTemplate]="segmentedLabelTmpl"></nz-segmented>
<ng-template #segmentedLabelTmpl let-option>
<ng-container [ngSwitch]="option.value">
<ng-container *ngSwitchCase="'card'">
<span nz-icon nzIconfont="icon-card-list"></span>
</ng-container>
<ng-container *ngSwitchCase="'list'">
<span nz-icon nzType="unordered-list"></span>
</ng-container>
</ng-container>
</ng-template>
build 时报错
[ERROR] NG8002: Can't bind to 'nzLabelTemplate' since it isn't a known property of 'nz-segmented'.
1. If 'nz-segmented' is an Angular component and it has 'nzLabelTemplate' input, then verify that it is part of this module.
2. If 'nz-segmented' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. [plugin angular-compiler]
请问如何解决？
最佳答案
0
ng-zorro-antd 19 重新设计了 segmented 组件，需要使用 nz-segmented-item，以下是 release notes 中的说明
Remove nzLabelTemplate, use nz-segmented-item directive instead
相关 PR：feat(module:segmented): redesign the segmented component
基于 nz-segmented-item 的实现方法：
<nz-segmented [(ngModel)]="selectedListTypeIndex" [nzOptions]="listTypeOptions">
<label nz-segmented-item nzValue="card">
<span nz-icon nzIconfont="icon-card-list"></span>
</label>
<label nz-segmented-item nzValue="list">
<span nz-icon nzType="unordered-list"></span>
</label>
</nz-segmented>
