ionic入门之多组件开发模式

最新推荐文章于 2023-11-06 15:52:53 发布

原创最新推荐文章于 2023-11-06 15:52:53 发布 · 609 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ionic多组件

ionic 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一个使用Angular实现的英雄列表与详情展示的应用案例，包括组件开发模式、目录结构组织、HTML模板语法及样式设置等关键技术细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在实战中建议是用多组件开发模式，高耦合低内聚。
文件名和组件名遵循风格指南中的标准方式。

组件的类名应该是大驼峰形式，并且以Component结尾。因此英雄详情组件的类名是HeroDetailComponent。
组件的文件名应该是小写中线形式，每个单词之间用中线分隔，并且以.component.ts结尾。因此HeroDetailComponent类应该放在hero-detail.component.ts文件中。

目录结构

hero.component.html

<div padding>
  <h1>{{title}}</h1>
  <ul class="heroes">
    <li *ngFor="let hero of heroes" [class.selected]="hero === selectedHero" (click)="onSelect(hero)">
      <span class="badge">{{hero.id}}</span> {{hero.name}}
    </li>
  </ul>
  <hero-detail [hero]="selectedHero"></hero-detail>
</div>

hero.component.scss

my-app {
  .selected {
    background-color: #CFD8DC !important;
    color: white;
  }
  
  .heroes {
    margin: 0 0 2em 0;
    list-style-type: none;
    padding: 0;
    width: 15em;
  }
  
  .heroes li {
    cursor: pointer;
    position: relative;
    left: 0;
    background-color: #EEE;
    margin: 5px 5px 5px 5px;
    height: 25px;
    border-radius: 4px;
  }
  
  .heroes li.selected:hover {
    background-color: #BBD8DC !important;
    color: white;
  }
  
  .heroes li:hover {
    color: #607D8B;
    background-color: #DDD;
    left: .1em;
  }
  
  .heroes .text {
    position: relative;
    top: -3px;
  }
  
  .heroes .badge {
    display: inline-block;
    font-size: small;
    color: white;
    padding: 5px 5px 5px 5px;
    background-color: #607D8B;
    position: relative;
    height: 25px;
    margin-right: .8em;
    border-radius: 4px 0 0 4px;
  }
}

hero.component.ts

import { Component } from '@angular/core';
import { Hero } from './hero';

const HEROES : Hero[] = [
  { id : 101, name : '张三'},
  { id : 102, name : '李四'},
  { id : 103, name : '王五'},
  { id : 104, name : '赵六'},
  { id : 105, name : '陈七'},
  { id : 106, name : '吴八'}
  ];

@Component({
  selector : 'my-app',
  templateUrl : './hero.component.html'
})
export class HeroComponent{
  title = '人物列表';
  heroes = HEROES;
  selectedHero : Hero;

  onSelect(hero : Hero) : void {
    this.selectedHero = hero;
  }
}

hero.ts

export class Hero {
  id : number;
  name : string;
}

hero-details.component.html

<div *ngIf="hero">
  <h2>大家好：我叫{{hero.name}}！</h2>
  <div><label>编号: </label>{{hero.id}}</div>
  <div>
    <label>姓名: </label>
    <input [(ngModel)]="hero.name" placeholder="name"/>
  </div>
</div>

hero-details.component.ts

import { Component, Input } from  '@angular/core';
import { Hero } from './hero';

@Component({
  selector : 'hero-detail',
  templateUrl : './hero-details.component.html'
})
export class HeroDateilComponent {
  @Input() hero : Hero;
}