【问题标题】:Navigate from one LWC to another LWC从一个 LWC 导航到另一个 LWC
【发布时间】:2019-09-18 02:06:24
【问题描述】:

我有两个闪电网络组件,我必须通过单击按钮从一个 LWC 导航到另一个 LWC。

我尝试导航服务应用组件基类中的 NavigationMixin 函数来扩展 NavigationMixin(LightningElement)。但它没有用。

谁能帮帮我?

谢谢。

【问题讨论】:

    标签: salesforce salesforce-lightning lwc


    【解决方案1】:

    你不能(还)。

    List of all interesting PageReference types 表示你应该使用standard__component,但目标不能是纯 LWC。充其量只能隐藏在 Aura 包装内。

    闪电组件。要制作可寻址的 Lightning Web 组件, 将其嵌入到一个 Aura 组件中,该组件实现 lightning:isUrlAddressable接口。

    这很痛苦。我怀疑这也是为什么我们还不能用 LWC 快速行动的原因,它们必须被包裹在 Aura 中。

    点击引用中的链接,它将引导您示例如何传递参数(/lightning/cmp/c__helloTarget?c__firstname=John

    【讨论】:

    【解决方案2】:

    我也遇到过类似的问题。我一直在尝试从社区中的另一个人导航到 LWC,它看起来像: 在社区中,只有 comm__namedPage page-reference 有效。

    【讨论】:

    • 不是真的,您可以查看我的解决方案,了解有关如何通过简单的按钮单击从一个页面导航到另一个页面的详细信息。
    【解决方案3】:

    在 Salesforce LWC 应用程序中,您可以使用以下代码从一个 LWC 组件导航到另一个(位于另一个选项卡/应用程序页面上)

    myComponent.html

    <a href="javascript:void(0);" tabindex="0" onclick={navigateNext}>Click Here</a>
    

    myComponent.js

        import { NavigationMixin } from 'lightning/navigation';
        import { CurrentPageReference } from 'lightning/navigation';
    
        export default class MyComponent extends NavigationMixin(LightningElement){
    
            @wire(CurrentPageReference) pageRef;
    
            @api tabName = "NextPage";
            navigateNext() {
                console.log("tabName = ", this.tabName)
                this[NavigationMixin.Navigate]
                    ({
                        type: 'standard__navItemPage',
                        attributes: {
                            apiName: this.tabName
                        }
                    });
            }
        }
    

    请将tabName 变量替换为您应该导航的应用页面/选项卡名称。

    就是这样。当您单击 html 中的 button 时,您将导航到指定的 tabName

    您也可以通过官方文档了解更多信息https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.use_navigate_basic

    【讨论】:

      【解决方案4】:

      在LWC Application中,我们可以通过以下两种方式之一:

      1.使用容器组件

      创建一个父 LWC 组件,该组件将包含两个 lwc 组件并一次显示其中一个组件。

      单击按钮时,调度自定义事件以在组件之间导航。 在容器组件中接收到自定义事件后,隐藏可见组件并显示另一个。

      2。利用 LWC 路线。

      有关lwc路线的信息,请点击以下链接。

      http://lwc-router.com/#/quickstart

      【讨论】:

        猜你喜欢
        • 2020-05-21
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2020-11-16
        • 1970-01-01
        相关资源
        最近更新 更多