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

Question

我正在使用 Nativescript-vue 开发一个应用程序。该应用程序需要用户登录。启动时，该应用程序会检查 appSettings 用户是否已登录。如果已登录，用户将被定向到选择菜单 ("Home")。如果用户未登录，该应用程序加载一个登录表单，该表单根据远程数据库验证凭据，然后将用户定向到完全相同的菜单 ("Home")。

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

问题是应用程序显示或不显示图标取决于用户在 Home.vue 菜单中的最终结果。

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

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();

HOME.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 图标会出现在单个页面上（加载时）取决于用户最终到达那里的方式？

Answer 1

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

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

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

Answer 2

我通过在文本属性中使用 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"/>

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

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

FontAwesome Icons Not Always Displaying in Nativescript (Vue) App?

font-awesome

vue.js

nativescript