我正在尝试将图标的名称直接传递给我的html。
它对离子图标工作得很好,但对fontAwesome图标不起作用。
tabs.page.ts:
import { Component } from '@angular/core';
@Component({
selector: 'app-tabs',
templateUrl: 'tabs.page.html',
styleUrls: ['tabs.page.scss']
})
export class TabsPage {
public pages = [
{ title: 'Catalog', url: 'home', icon: 'home', type: 'ion' },
{ title: 'Account', url: '/about', icon: 'square', type: 'fa' },
{ title: 'Contact', url: '/contact', icon: 'square', type: 'fa' },
{ title: 'Gallery', url: '/gallery', icon: 'square', type: 'fa' },
{ title: 'Setting', url: '/setting', icon: 'settings', type: 'ion',
children: [
{ title: 'sub-menu1', url: '/sub-menu1', icon: 'person' },
{ title: 'sub-menu2', url: '/sub-menu2', icon: 'person' },
{ title: 'sub-menu3', url: '/sub-menu3', icon: 'pulse' }
] }
];
constructor() {}
}
tabs.page.html:
<ion-menu-toggle *ngIf="p.url">
<ion-item>
<ion-icon [name]="p.icon" slot="start" *ngIf="p.type === 'ion'"></ion-icon>
<fa-icon [icon]="['fas', 'p.icon']" slot="start" style="font-size:26px;" *ngIf="p.type === 'fa'"></fa-icon>
<ion-label>
{{ p.title }}
</ion-label>
</ion-item>
</ion-menu-toggle>
我得到这个错误:
error TS2322: Type '"p.icon"' is not assignable to type 'IconName'.
我尝试更改代码,但出现以下错误:
<fa-icon [icon]="p.icon" slot="start" style="font-size:26px;" *ngIf="p.type === 'fa'"></fa-icon>
错误TS2322:类型“string”不能分配给类型“IconProp”。
<fa-icon [icon]="['fas', p.icon]" slot="start" style="font-size:26px;" *ngIf="p.type === 'fa'"></fa-icon>
错误TS2322:类型“string”不能分配给类型“IconName”。
直接声明时图标显示完美:
<fa-icon [icon]="['fas', 'cube']" slot="start" style="font-size:26px;" *ngIf="p.type === 'fa'"></fa-icon>
有人知道怎么修吗?
3条答案
按热度按时间dpiehjr41#
这应该能起到作用:
请注意,引号已经消失,因此它被解释为对象的属性,而不是字符串。
kadbb4592#
图标名称以字符串形式提供,而非引用
你将p.icon作为一个字符串提供,Angular将其作为一个文字字符串。只要直接引用它,你的问题就解决了。
固定编码:
请注意,如果所有图标都使用
FontAwesome Regular
样式,如果您还使用FontAwesome Solid
,则必须调整tabs.page.ts
文件。4si2a6ki3#
看起来font-awesome需要一个字符串数组,所以当它是fa时,你可以像这样改变你的图标值:
并在html上提供如下内容: