在此步骤中，您将创建一个新的Web组件，该组件显示特定会议会话的详细信息。您还实现了一个简单的导航系统，该系统允许用户在会话列表和会话详细信息之间来回导航。

首先，让我们创建Web组件的JavaScript文件。

1. 在现有my文件夹下，创建一个名为的新文件夹sessionDetails。
2. 在sessionDetails文件夹中，创建一个名为的新文件sessionDetails.js。
3. 实现了sessionDetails类，如下所示：

   import { LightningElement, api } from 'lwc';
   import { getSession } from 'data/sessionService';
   export default class SessionDetails extends LightningElement {
     session;
     @api
     set sessionId(id) {
       this._sessionId = id;
       this.session = getSession(id);
     }
     get sessionId() {
       return this._sessionId;
     }
   }

   我们使用@api装饰器将sessionIdsetter方法定义为public。这样，您就可以提供标签sessionId 的属性my-session-details。带注释的属性@api是反应性的：当其值更改时，组件将自动重新呈现。

4. 保存的sessionDetails.js文件。

现在，让我们在Web组件模板中创建用户界面。

1. 在sessionDetails文件夹中，创建一个名为的新文件sessionDetails.html。
2. 实施模板，如下所示：

   <template>
     <template if:true={session}>
       <h2>{session.name}</h2>
       <p class="icon time">{session.dateTime}</p>
       <p class="icon room">{session.room}</p>
       <h3>Abstract</h3>
       <div class="abstract">{session.description}</div>
     </template>
   </template>
   
3. 保存的sessionDetails.html文件。

接下来，让我们创建Web组件的CSS文件，以确保一切看起来都不错。

1. 在sessionDetails文件夹中，创建一个名为的新文件sessionDetails.css。
2. 定义以下样式：

   :host {
     width: 100%;
     margin: 2rem;
     color: #080707;
   }
   p {
     margin: 0;
   }
   .icon {
     color: #039be5;
     background-repeat: no-repeat;
     background-size: contain;
     padding-left: 24px;
   }
   .icon.time {
     background-image: url(https://developer.salesforce.com/files/js-dev/icons/clock.svg);
     margin-top: .6rem;
   }
   .icon.room {
     background-image: url(https://developer.salesforce.com/files/js-dev/icons/location.svg);
     margin-top: .4rem;
   }
   h2 {
     font-weight: 600;
     font-size: 1.4rem;
   }
   h2 a, h2 a:visited {
     color: #039be5;
     text-decoration: none;
   }
   h2 a:hover {
     color: #017bb7;
   }
   h3 {
     font-weight: bold;
     font-size: 1.1rem;
     margin: 1.5rem 0 0.5rem 0;
   }
   .list-wrapper {
     display: flex;
     flex-direction: column;
   }
   .speaker-list {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     margin: 0 -0.5rem;
   }
3. 保存的sessionDetails.css文件。

而已！您创建了一个显示会议会话详细信息的Web组件。

要查看它的实际效果，您需要将其添加到应用程序中。

1. 打开了app.html该文件app的文件夹。
2. 在标签之后添加以下<my-session-list></my-session-list>标签：

   <my-session-details session-id={sessionId}></my-session-details>
3. 保存的app.html文件。
4. 打开该app.js文件。
5. 在App类定义中定义一个属性：

   import { LightningElement } from 'lwc';
   export default class App extends LightningElement {
     sessionId;
   }
6. 保存的app.js文件。

返回浏览器，请注意该sessionDetails组件未出现。这是因为sessionId您刚刚定义的 属性app.js尚未指向实际的sessionId。换句话说，应用程序不知道要显示哪个会话。这就提出了一个很好的问题：sessionDetails 组件应实际显示哪个会话？答案是：用户在sessionList组件中单击的会话！sessionList组件如何通知应用程序单击了特定会话？通过调度自定义DOM事件。

现在，您已经创建了所有不同的组件，您需要在应用程序的不同方面显示它们，并确保不同的组件相互反应。首先，让我们修改sessionList组件，使其在单击会话时触发一个事件。

1. 打开该sessionList.html文件。
2. 将以下属性添加到<a>标签：data-index={index} onclick={handleSessionClick}它看起来像 

   <a key={session.id} class="session" data-index={index} onclick={handleSessionClick}>
3. 保存的sessionList.html文件。
4. 打开该sessionList.js文件。
5. 在handleSessionClick函数SessionList之后，将事件处理程序添加到类中handleSearchKeyInput：

   handleSessionClick(event) {
     const index = event.currentTarget.dataset.index;
     const navigateEvent = new CustomEvent('navigate', {
       detail: {
         sessionId: this.sessions[index].id
       }
     });
     this.dispatchEvent(navigateEvent);
   }
6. 保存的sessionList.js文件。

接下来，让我们在appWeb组件中监听该事件。

1. 打开该app.html文件。
2. onnavigate在my-session-list标签上添加一个属性：

   <my-session-list onnavigate={handleNavigate}></my-session-list>
3. 保存的app.html文件。
4. 打开该app.js文件。
5. 在handleNavigate之后添加事件处理程序sessionId;：

   handleNavigate(event) {
     this.sessionId = event.detail.sessionId;
   }
6. 保存的app.js文件。

返回浏览器，然后单击其中一个会话。现在，该会话的详细信息应出现在列表之后。 

一切正常，但是滚动到列表底部以查看详细信息并不是很好的用户体验。您可以在列表的右侧显示详细信息，但这可能不适用于移动设备。在下一部分中，您将实现一个基本的导航系统，该系统允许用户导航到不同的视图。

导航是单页应用程序的重要组成部分。在此项目中，您将为应用程序使用两个状态（“列表”和“详细信息”）实现最小导航系统，并使用自定义事件在这些状态之间进行导航。

1. 打开该app.js文件。
2. 声明一个state产权后sessionId;：

   state = 'list';
3. 修改的handleNavigate事件处理程序更改应用程序的基础上，自定义导航事件值的状态。

   handleNavigate(event) {
     this.state = event.detail.state;
     this.sessionId = event.detail.sessionId;
   }
4. 添加两个可以在组件模板中使用的getter函数，以检查应用程序的当前状态。

   get isStateList() {
     return this.state === 'list';
   }
   get isStateDetails() {
     return this.state === 'details';
   }
5. 保存的app.js文件。
6. 打开该app.html文件。
7. 裹<my-session-list>在一个if:true指令时，应用程序的状态是“清单”，只显示它：

   <template if:true={isStateList}>
     <my-session-list onnavigate={handleNavigate}>
     </my-session-list>
   </template>
   
8. 裹<my-session-details>在一个if:true指令时，应用程序的状态是“细节”，只显示它：

   <template if:true={isStateDetails}>
     <my-session-details session-id={sessionId}>
     </my-session-details>
   </template>
9. onnavigate在my-session-details标签上添加一个属性：

   <my-session-details onnavigate={handleNavigate} session-id={sessionId}>
   </my-session-details>
10. 保存的app.html文件。

接下来，让我们确保选择会话时更改状态。

1. 打开该sessionList.js文件。
2. 将handleSessionClick事件处理函数替换为：

   handleSessionClick(event) {
     const index = event.currentTarget.dataset.index;
     const navigateEvent = new CustomEvent('navigate', {
       detail: {
         state: 'details',
         sessionId: this.sessions[index].id
       }
     });
     this.dispatchEvent(navigateEvent);
   }
3. 保存的sessionList.js文件。

接下来，让我们确保用户可以返回到会话列表。

1. 1. 打开该sessionDetails.html文件。
   2. 将会话标题替换为<h2>{session.name}</h2>：

<h2><a href="#" onclick={handleSessionsClick}>Sessions</a> &gt; {session.name}</h2>

1. 保存的sessionDetails.html文件。
2. 打开该sessionDetails.js文件。
3. 将handleSessionsClick事件处理程序添加到sessionDetails类中，紧接在sessionIdgetter函数之后：

   handleSessionsClick() {
     const navigateEvent = new CustomEvent('navigate', {
       detail: {
         state: 'list'
       }
     });
     this.dispatchEvent(navigateEvent);
   }
   
4. 保存的sessionDetails.js文件。

返回浏览器，然后单击其中一个会话。现在，会话列表显示单击的会话的详细信息视图。如果单击会话标题旁边的“会话”链接，则返回到会话列表。

很好！会议与会者单击特定的会议时，可以查看会议列表并导航到详细信息视图。为了将您学到的东西付诸实践，创建一个最终的Web组件，该组件在会话详细信息视图上显示扬声器卡。

首先，让我们创建Web组件的JavaScript文件。

1. 在现有my文件夹下，创建一个名为的新文件夹speakerCard。
2. 在speakerCard文件夹中，创建一个名为的新文件speakerCard.js。
3. 实现SpeakerCard该类，如下所示：

   import { LightningElement, api } from 'lwc';
     export default class SpeakerCard extends LightningElement {
       @api speaker;
   }
4. 保存的speakerCard.js文件。

接下来，让我们创建Web组件的HTML模板。

1. 在speakerCard文件夹中，创建一个名为的文件speakerCard.html。
2. 实施模板，如下所示：

   <template>
     <div class="card">
       <div class="header">
         <img src={speaker.pictureUrl} alt="Speaker picture">
         <div>
           <p class="title">{speaker.name}</p>
           <p class="icon email">{speaker.email}</p>
         </div>
       </div>
       {speaker.bio}
     </div>
   </template>
3. 保存的speakerCard.html文件。

接下来，让我们添加一些样式以确保一切都看起来不错。

1. 在speakerCard文件夹中，创建一个名为的文件speakerCard.css。
2. 添加以下样式：

   :host {
     margin: 0.5rem;
     flex: 1;
     color: #080707;
   }
   .card {
     border: 1px solid #dddbda;
     border-radius: 0.25rem;
     padding: 1rem;
   }
   .card .header {
     display: flex;
     align-items: center;
     margin-bottom: 1rem;
   }
   .card img {
     border-radius: 50%;
     height: 5rem;
     margin-right: 1rem;
   }
   .card .title {
     font-weight: 600;
   }
   .card .icon {
     color: #039be5;
     background-repeat: no-repeat;
     background-size: contain;
     padding-left: 24px;
   }
   .card .icon.email {
     background-image: url(https://developer.salesforce.com/files/js-dev/icons/email.svg);
     margin-top: 0.4rem;
   }
   p {
     margin: 0;
   }
3. 保存的speakerCard.css文件。

最后，让我们将扬声器卡添加到会话详细信息视图中。

1. 打开该sessionDetails.html文件。
2. 在abstractdiv之后添加以下标记：

   <h3>Speakers</h3>
     <div class="speaker-list">
       <template if:true={session.speakers}>
         <template for:each={session.speakers} for:item="speaker">
           <my-speaker-card key={speaker.id} speaker={speaker}>
           </my-speaker-card>
       </template>
     </template>
   </div>
3. 保存的sessionDetails.html文件。

返回浏览器窗口，然后单击列表中的会话。会话详细信息视图现在应该看起来像这样，包括扬声器卡。

恭喜，您已经成功创建了第一个Lightning Web Component开源应用程序！请查看本系列的下一个项目，在该项目中您可以修改应用程序以使用REST服务从Salesforce获取会议数据。您无需了解Salesforce即可执行下一个项目。我们将指导您完成所有步骤。