使用Lightning Web组件构建Bear-tracking应用程序 – 与整个应用程序中的组件进行通信

更新Bear List组件

公园护林员对您有最后要求。他们希望在过滤熊名单时在地图上找到熊。您必须创建一个熊图组件并修改熊列表，以便将事件发送到地图。让我们从更新熊列表开始。

编辑bearList.js文件。
在下面添加以下代码import { NavigationMixin } from 'lightning/navigation';：
```
import { publish, MessageContext } from 'lightning/messageService';
import BEAR_LIST_UPDATE_MESSAGE from '@salesforce/messageChannel/BearListUpdate__c';
```
首次导入从Lightning Messaging Service（LMS）带来实用程序。此服务使您可以通过Lightning消息通道跨Lightning页面中的兄弟组件发布消息。
第二个导入是从GitHub检索的基础项目中包含的Lightning消息通道。
替换这两行…
```
@wire(searchBears, {searchTerm: '$searchTerm'})
bears;
```
…具有以下代码：
```
bears;
@wire(MessageContext) messageContext;
@wire(searchBears, {searchTerm: '$searchTerm'})
loadBears(result) {
  this.bears = result;
  if (result.data) {
    const message = {
      bears: result.data
    };
    publish(this.messageContext, BEAR_LIST_UPDATE_MESSAGE, message);
  }
}
```
代码重点：
- 我们检索闪电消息上下文并将其存储在messageContext属性中。
- 我们使用有线功能捕获传入的熊名单数据，并BearListUpdate__c使用熊记录列表触发自定义Ligthning消息。
- 我们将searchTerm动态参数传递给有线searchBears适配器，以便每次searchTerm更改时loadBears都会重新执行，并使用新的搜索结果触发一条新消息。
- 我们使用publish从LMS导入的功能来触发BearListUpdate__c带有清单的Ligthning消息。

创建Bear Map组件

在VS Code中，右键单击lwc文件夹，然后单击SFDX：Create Lightning Web Component。
命名组件bearMap。

编辑bearMap.js-meta.xml文件，并替换<isExposed>false</isExposed>为这些行。

<isExposed>true</isExposed>
<targets>
	<target>lightning__AppPage</target>
	<target>lightning__RecordPage</target>
	<target>lightning__HomePage</target>
</targets>

这使您的组件可以放置在任何类型的页面上。

将以下内容替换为bearMap.html：

<template>
	<article class="slds-card">
		<lightning-map
			map-markers={mapMarkers}
			zoom-level="11"
			markers-title="Bears">
		</lightning-map>
	</article>
</template>

代码重点：

我们显示一个包含地图的卡组件。
该地图显示mapMarkers数组中的项目。

将以下内容替换为bearMap.js：

import { LightningElement, wire } from 'lwc';
import { subscribe, unsubscribe, MessageContext } from 'lightning/messageService';
import BEAR_LIST_UPDATE_MESSAGE from '@salesforce/messageChannel/BearListUpdate__c';
export default class BearMap extends LightningElement {
  mapMarkers = [];
  subscription = null;
  @wire(MessageContext)
  messageContext;
  connectedCallback() {
    // Subscribe to BearListUpdate__c message
    this.subscription = subscribe(
        this.messageContext,
        BEAR_LIST_UPDATE_MESSAGE,
        (message) => {
            this.handleBearListUpdate(message);
        });
  }
  disconnectedCallback() {
    // Unsubscribe from BearListUpdate__c message
    unsubscribe(this.subscription);
    this.subscription = null;
  }
  handleBearListUpdate(message) {
    this.mapMarkers = message.bears.map(bear => {
      const Latitude = bear.Location__Latitude__s;
      const Longitude = bear.Location__Longitude__s;
      return {
        location: { Latitude, Longitude },
        title: bear.Name,
        description: `Coords: ${Latitude}, ${Longitude}`,
        icon: 'utility:animal_and_nature'
      };
    });
  }
}

代码重点：

我们实现了两个组件生命周期挂钩函数：connectedCallback和disconnectedCallback。组件加载和卸载时会自动调用它们。我们使用这两个功能来订阅和取消订阅我们的自定义BearListUpdate__c闪电消息。
一旦收到BearListUpdate__c消息，该handleBearListUpdate函数就会被调用，并带有当前已过滤的熊记录列表。handleBearListUpdate构建一个地图标记列表，该列表将传递给该mapMarkers属性，然后显示在我们的地图组件上。