app-gift/app-angular/src/modules/lesson/home/home.component.html

<ion-content>
  


  <ion-card>
    <ion-card-header>
      <ion-card-title>RideQuest</ion-card-title>
      <ion-card-subtitle>踏上新的地平线。</ion-card-subtitle>
    </ion-card-header>
    <ion-searchbar show-clear-button="focus" placeholder="发现更多路线"></ion-searchbar>
    <h1>{{lessonName}}</h1>
    <ion-card-content>
      <ion-list>
        <ng-container *ngFor="let lesson of lessonList;let i = index">
          <ion-item (click)="goDetail(lesson)">
            <ion-thumbnail slot="start">
              <img  alt="Silhouette of mountains" [src]="lesson?.logo || 'https://ionicframework.com/docs/img/demos/thumbnail.svg'"  />
            </ion-thumbnail>
            <ion-label >热榜本地路线{{i+1}}：{{lesson.title1}} 点赞：{{toK(lesson.like)}}
              点赞：{{lesson.like | tok}}</ion-label>
          </ion-item>
        </ng-container>
      </ion-list>
    </ion-card-content>
  </ion-card>

<div class="page-content">

   
    <div class="quick-links">
      


      

      <!-- 组件：通过selector标签引用组件，并通过@Input传参，用[]传递变量 -->
      <ng-container *ngFor="let lesson of lessonList;let i = index">
        <app-comp-lesson-card [title1]="lesson.title1" [author]="lesson.author" [somedetails] = "lesson.somedetails" [lesson]="lesson" 
        *ngIf="lesson.isEnabled" (click)="goDetail(lesson)"></app-comp-lesson-card>
      </ng-container>

      <!-- 组件：通过selector标签引用组件，并通过@Input传参 -->
      <app-comp-lesson-card [name]="title"></app-comp-lesson-card>
      <app-comp-lesson-card [name]="'title123'"></app-comp-lesson-card>
      <app-comp-lesson-card name="666"></app-comp-lesson-card>
      <app-comp-lesson-card somedetails = "我是精髓"></app-comp-lesson-card>
      <app-comp-lesson-card></app-comp-lesson-card>
      <app-comp-lesson-card></app-comp-lesson-card>
      <app-comp-lesson-card></app-comp-lesson-card>
      <!-- 添加更多的行 -->
    </div>
    <div class="course-area">
      <div class="filter-tags">
        <!-- 添加筛选标签 -->
      </div>
      <div class="course-list">
        <!-- 添加课程列表 -->
      </div>
    </div>
  </div>
  
</ion-content>