在 Nativescript (Vue) 应用程序中不总是显示 FontAwesome 图标？答案

【问题标题】：FontAwesome Icons Not Always Displaying in Nativescript (Vue) App?在 Nativescript (Vue) 应用程序中不总是显示 FontAwesome 图标？
【发布时间】：2020-04-29 22:43:51
【问题描述】：

我正在使用 Nativescript-vue 开发一个应用程序。该应用程序要求用户登录。启动时，该应用程序会检查appSettings 是否用户已登录。如果已登录，用户将被定向到选项菜单（“主页”）。如果用户未登录，应用程序会加载一个登录表单，该表单会针对远程数据库验证凭据，然后将用户定向到相同的菜单（“主页”）。

在这两种情况下，用户都被定向到完全相同的文件Home.vue。此页面由 5 个左右的按钮组成，每个按钮都有一个 FontAwesome 图标。

问题在于应用显示或不显示图标取决于用户在Home.vue 菜单中的结束方式。

当用户在启动时被定向到Home.vue（又名appSettings 变量显示用户已登录，因此不必提供凭据）时，图标不显示。请注意，通过单击一个按钮进一步深入应用程序，该按钮会将您带到另一个 *.vue 文件，该文件也使用带有嵌入式 FontAwesome 图标的按钮确实有效。
当用户在主页和应用程序的后续菜单中提供有效的用户名/密码凭据后被路由到Home.vue 文件时，图标会正确显示。 p>

MAIN.JS

import Vue from 'nativescript-vue'

// Font Awesome!
import {TNSFontIcon, fonticon} from 'nativescript-fonticon';

TNSFontIcon.debug = true;
TNSFontIcon.paths = {
  'fa': './assets/css/fontawesome.min.css',
  'far': './assets/css/regular.min.css',
  'fas': './assets/css/solid.min.css',
  'fab': './assets/css/brands.min.css'
};
TNSFontIcon.loadCss();

Vue.filter('fonticon', fonticon);

import {UserServices} from "./assets/js/UserServices.js"

import Login from "./components/Login.vue";
import Home from "./components/Home.vue"

let user = new UserServices();

new Vue({
    render: h =>  h('Frame', [
        h(
            (user.getLocalToken()) ? Home : Login
    )])
}).$start();

主页.VUE。（非常精简，但仍表现出所述行为）

<template>
    <Page class="page" @loaded="loaded">
        <StackLayout>
            <Button @tap="tapLogoutButton">
                <FormattedString>
                    <Span
                        class="fas button-icon" stretch="none" :text="'fa-sign-out-alt' | fonticon"
                    />
                    <Span
                        text="  Logout"
                    />
                </FormattedString>
            </Button>
        </StackLayout>

    </Page>
</template>

<script>
    import Login from "./Login";
    import { UserServices } from '../assets/js/UserServices'
    let u = new UserServices();


    export default {

methods:  {

            tapLogoutButton(){
                if (u.logout()){
                    this.$navigateTo(Login, {
                        clearHistory: true
                    });
                };
            },
        }
    };
</script>

任何关于 FA 图标为何会显示在单个页面上（加载时）的任何见解，具体取决于用户最终到达那里的方式？

【问题讨论】：

我猜这是因为loadCss()，它是一个异步函数返回一个承诺。在使用插件中的过滤器呈现图标之前，请确保已解决承诺。
谢谢@Manoj。您的反馈始终是高质量的。我相信您的建议可能是正确的，但我不知道该怎么做。
我能想到的方法有很多种，如果只是首页/登录页面的几个图标，不要使用插件，直接传字体代码。或者您可以创建一个事件总线/状态，它将保存一个布尔值，在解析 loadCss() 方法时设置为 true。您的主页和登录页面可以依赖标志，可能带有 v-if。插件处理 CSS 文件可能需要几毫秒。或者您可以修改插件以选择性地支持同步加载，甚至可以提出拉取请求。
再次感谢您。我使用了最简单的解决方案 - 使用 text.decode 对初始页面所需的图标进行硬编码。你的其他建议也很可靠，但我很简单。如果您将您的回复作为建议的解决方案发布，我将点击接受。谢谢。

标签： vue.js nativescript font-awesome

【解决方案1】：

您正在尝试在第一页准备好之前使用该插件。 loadCss() 是一个异步函数，返回一个承诺。在使用插件中的过滤器呈现图标之前，您必须确保已解决承诺。

有多种方法可以解决这个问题

如果只是主页/登录页面的几个图标，不要使用插件，直接传递字体代码。
您可以创建一个事件总线/状态，它将保存一个布尔值，在解析loadCss() 方法时将其设置为true。您的主页和登录页面可以依赖标志，可能带有 v-if。插件处理 CSS 文件可能需要几毫秒。
您可以修改插件以选择性地支持同步加载，甚至可以提出拉取请求。

【讨论】：

【解决方案2】：

我通过在 text 属性中使用 unicode 解决了这个问题。将其绑定到 Vue 数据。

在模板处：

<Label class="fas" :text="file_privacy_police | fonticon"/>

在<script> 标签处：

data() {
    return {
        address_book: "\uf2bb",
        file_privacy_police: "\uf570"
    };
},

但是你可以直接在text属性处添加unicode：

<Label class="fas" :text="'\uf570' | fonticon"/>

这解决了我在登录并重新启动应用时无法加载图标的问题。

【讨论】：