1

在 Lightning Web 组件中从 Apex 检索数据时显示加载指示器的最佳方式是什么？

我有这种方法：

import { LightningElement, api } from "lwc";
import shouldShowCard from "@salesforce/apex/ApexClass.shouldShowCard";

/**
 * Card component that is conditionally shown based on Apex.
 */
export default class ConditionalCard extends LightningElement {
    @api recordId;

    @api isDone = false;

    @api shouldShow = false;

    connectedCallback() {
        shouldShowCard({ id: this.recordId })
            .then(result => {
                this.shouldShow = result;
            })
            .finally(() => {
                this.isDone = true;
            });
    }
}

而这个 HTML

<template>
  <template if:false={isDone}>
    <div>Loading...</div>
  </template>
  <template if:true={shouldShow>
    <div>Card</div>
  </template>
</template>

现在，这可行，但我使用的是 LWC ESLint 规则，当我这样做时，我收到一个错误/警告“no-api-reassignment”，因为我在我的 connectedCallback 中分配了 api 属性。 https://github.com/salesforce/eslint-plugin-lwc/blob/master/docs/rules/no-api-reassignments.md

这似乎是合理的，尽管它与 Salesforce Lightning Spinner 显示的模式非常相似。 https://developer.salesforce.com/docs/component-library/bundle/lightning-spinner/documentation

所以我只是在寻找处理这个问题的最佳方法的建议，或者我是否应该禁用 ESLint 规则。其他要考虑的事情是如何测试这些东西，API 装饰器的反应性使我的事情变得非常容易，但如果我没有使用最好的方法，我不想继续。

4

1 回答 1

1

如果这些参数是内部状态，则不需要@api，如果您不打算从父组件设置它们或将它们公开给系统管理员，以便他可以在 Lightning App Builder 中配置组件。您应该只需要@track- 甚至根本不需要注释。@track对于自 Spring'20 以来您不需要的简单变量（发行说明）；如果您的变量是数组或对象，您可能仍然需要它。

这应该很好地使 ESLint 静音。

我做的有点不同，个人喜好来自 Visualforcestatus和rendered我猜的日子。

<template>
    <template if:true={loaded}>
        <p>Content goes here</p>
    </template>
    <template if:false={loaded}>
        <lightning-spinner variant="brand" alternative-text="Loading"></lightning-spinner>
    </template>
</template>


import { LightningElement, api, wire, track } from 'lwc';
import someMethod from '@salesforce/apex/SomeClass.someMethod';

export default class StackExample extends LightningElement {
    @api recordId;
    @track data;
    loaded = false;

    @wire(someMethod, { i: '$recordId' }) wiredResponse({ error, data }) {
        if (data) {
            this.data = data;
            // some post-processing here
        } else if (error) {
            // show toast?
        }
        if(data || error){
            this.loaded = true;
        }
    }
}

请记住，有些标签像<lightning-datatable>有内部微调器。在文档中搜索isLoading. 因此，您甚至不需要ifhtml 中的 s 。

于 2020-04-21T09:19:10.343 回答