如何显示动态选择的离子图标?

Question

我有一个小按钮，它意味着某种关闭按钮，带有某种动态选择(即在运行时可选择)图像，用于放置在工具栏中。

close-button.component.html:

<ion-button (click)="click()">
    <ion-icon [ios]="ios" [md]="md" slot="icon-only"></ion-icon>
</ion-button>

close-button.component.ts:

// snip imports, @Component
export class CloseButtonComponent implements OnInit {
    @Input() public click: () => void;
    @Input() public direction?: string;
    protected md: string = 'close';
    protected ios: string = 'close';
    constructor() {}
    public ngOnInit(): void {
        if(this.direction) {
            this.ios = 'chevron-' + this.direction;
            this.md = 'arrow-' + this.direction;
        }
    }
}

问题是图标不显示，除非direction是假的。

我做错了什么?

Answer 1

问题不在于你的动态选择，而是你的图标。如果你想使用离子图标，一定要检查图标文档。Chevron和Arrow有up、forward、down和back方向，而不是左右方向。

<ion-icon name="chevron-forward"></ion-icon>