Navigation between tabs using Lightning Message Service

Question

I have a navigation bar contains two tabs Home and Help. If I click on home, Home component should render below navigation bar and If I click on help, help component should render below navigation bar. I have wrote the below code with Lightning Message Service but Navigation is not happening. Any help would be appreciated, Thanks

navigationComponent.html

<template>
    <lightning-tabset>
        <lightning-tab label="Home" value="home" onactive={handleActiveTab}></lightning-tab>
        <lightning-tab label="Help" value="help" onactive={handleActiveTab}></lightning-tab>
    </lightning-tabset>
    <div lwc:dom="manual" class="componentContainer"></div>
</template>

navigationComponent.js

import { LightningElement, wire } from 'lwc';
import {
    publish,
    MessageContext,
    subscribe,
    unsubscribe
  } from 'lightning/messageService';
import navigationChannel from '@salesforce/messageChannel/navigation__c';


export default class NavigationComponent extends LightningElement {
    @wire(MessageContext) pageRef;
    selectedTabValue = 'home';
    subscription = null;

    connectedCallback() {
        this.subscription = subscribe(this.pageRef, navigationChannel, this.handleNavigationMessage.bind(this));
    }

    disconnectedCallback() {
        unsubscribe(this.subscription);
        this.subscription = null;
    }

    handleActiveTab(event) {
        this.selectedTabValue = event.target.value;
        console.log(event.target.value);
        this.sendMessage();
    }

    sendMessage() {
        const message = {
            tab: this.selectedTabValue,
            isVisible: true
        };
        console.log('selected==>'+this.selectedTabValue)
        publish(this.pageRef, navigationChannel, message);
    }

    handleNavigationMessage(message) {
        if (message.tab !== this.selectedTabValue) {
            console.log('hide==>'+message.tab)
            this.hideComponent(message.tab);
        }
    }

    hideComponent(tabValue) {
        const message = {
            tab: tabValue,
            isVisible: false
        };
        publish(this.pageRef, navigationChannel, message);
    }
}

navigationComponent.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>56.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
        <target>lightning__Tab</target>
    </targets>
</LightningComponentBundle>

home.html

<template>
    <div class="slds-m-around_medium">
        <h1>Home Component</h1>
    </div>
</template>

help.html

<template>
    <div class="slds-m-around_medium">
        <h1>Help Component</h1>
    </div>
</template>

Answer 1

I don't think you need Lightning messaging service for this use case, you can just load the home and help component within the lightning tab component.

<template>
    <lightning-tabset>
        <lightning-tab label="Home" value="home">
            <c-home></c-home>
        </lightning-tab>
        <lightning-tab label="Help" value="help">
            <c-help></c-help>
        </lightning-tab>
    </lightning-tabset>
    <div lwc:dom="manual" class="componentContainer"></div>
</template>

Lightning Messaging Service is required when we need to communicate with other components (LWC, Aura, VF) which are not present in the same containment hierarchy but part of the DOM, in this case we can just add the child components within the parent component (not sure if there is any caveat in doing so).