FontAwesome图标不总是显示在Nativescript（Vue）应用程序中吗？

Question

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

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

问题是应用程序显示还是不显示图标，具体取决于用户在Home.vue菜单上的显示方式。

将用户定向到Home.vue时显示

• Icons 不是”（aka appSettings变量表示用户已登录，因此不必提供凭据）。请注意，通过单击将您带到另一个*.vue文件的按钮进一步深入应用程序，该文件也使用带有嵌入式FontAwesome图标的按钮[[does起作用。

• 图标

  是在提供有效的用户名/密码凭据后，同时在主页和应用程序的后续菜单中将用户路由到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()是一个异步函数，返回一个Promise。您必须先确保已兑现承诺，然后才能使用插件中的过滤器来呈现图标。

有多种方法可以解决此问题

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