第一个 Angular 项目 - 添加服务

这里主要用到的内容就是 [Angular 基础] - service 服务 提到的

前置项目在 第一个 Angular 项目 - 动态页面 这里查看

想要实现的功能是简化 shopping-list 和 recipe 之间的跨组件交流

回顾一下项目的结构：

❯ tree src/app/
src/app/
├── directives
├── header
├── recipes
│   ├── recipe-detail
│   ├── recipe-list
│   │   ├── recipe-item
│   ├── recipe.model.ts
├── shared
│   └── ingredient.model.ts
└── shopping-list
    ├── shopping-edit

11 directories, 31 files

层级结构相对来说还是有一点点复杂的，所以如果在 app 层构建一个对应的变量和事件再一层层往下传，无疑是一件非常麻烦的事情(尤其 V 层和 VM 层都要进行事件传输的对应变化)，而使用 service 就能相对而言比较简单的解决这个问题

创建新的 service

这里主要会创建两个 services：

src/app/
├── services
│   ├── ingredient.service.ts
│   └── recipe.service.ts

一个用来管理所有的 ingredients——这部分是放在 shopping-list 中进行展示的，另一个就是管理所有的 recipes

ingredient service

实现代码如下：

@Injectable({
  providedIn: 'root',
})
export class IngredientService {
  ingredientChanged = new EventEmitter<Ingredient[]>();

  private ingredientList: Ingredient[] = [
    new Ingredient('Apples', 5),
    new Ingredient('Tomatoes', 10),
  ];

  constructor() {}

  get ingredients() {
    return this.ingredientList.slice();
  }

  addIngredient(Ingredient: Ingredient) {
    this.ingredientList.push(Ingredient);
    this.ingredientChanged.emit(this.ingredients);
  }

  addIngredients(ingredients: Ingredient[]) {
    this.ingredientList.push(...ingredients);
    this.ingredientChanged.emit(this.ingredients);
  }
}

代码分析如下：

• Injectable

  这里使用 providedIn: 'root' 是因为我想让所有的组件共享一个 service，这样可以满足当 ingredient 页面修改对应的食材，并且将其发送到 shopping-list 的时候，数据可以进行同步渲染

• ingredientChanged

  这是一个 event emitter，主要的目的就是让其他的组件可以 subscribe 到事件的变更

  subscribe 是之前的 service 笔记中没提到的内容，这里暂时不会细舅，不过会放一下用法

• get ingredients()

  一个语法糖，这里的 slice 会创造一个 shallow copy，防止意外对数组进行修改

  也可以用 lodash 的 cloneDeep，或者单独创建一个函数去进行深拷贝

• add 函数

  向数组中添加元素，并向外发送数据变更的信号

recipe service

@Injectable()
export class RecipeService {
  private recipeList: Recipe[] = [
    new Recipe('Recipe 1', 'Description 1', 'http://picsum.photos/200/200', [
      new Ingredient('Bread', 5),
      new Ingredient('Ginger', 10),
    ]),
    new Recipe('Recipe 2', 'Description 2', 'http://picsum.photos/200/200', [
      new Ingredient('Chicken', 10),
      new Ingredient('Bacon', 5),
    ]),
  ];

  private currRecipe: Recipe;

  recipeSelected = new EventEmitter<Recipe>();

  get recipes() {
    return this.recipeList.slice();
  }

  get selectedRecipe() {
    return this.currRecipe;
  }
}

这里主要讲一下 Injectable，因为 recipe service 的部分应该被限制在 recipe 这个组件下，所以这里不会采用 singleton 的方式实现

其余的实现基本和上面一样

修改 recipe

这里依旧是具体业务具体分析：

• recipe

  这里需要获取 activeRecipe + ngIf 去渲染 recipe-detail 部分的内容，如：

  没有选中 recipe	选中了 recipe

• recipe-detail

  这里需要 activeRecipe 去渲染对应的数据，如上图

• recipe-list

  这里需要 recipes 去完成循环，渲染对应的 recipe-item

• recipe-item

  这里需要 activeRecipe 完成对 active 这个 class 的添加

recipe 组件的修改

• V 层修改：

  <div class="row">
    <div class="col-md-5">
      <app-recipe-list></app-recipe-list>
    </div>
    <div class="col-md-7">
      <app-recipe-detail
        [activeRecipe]="activeRecipe"
        *ngIf="activeRecipe; else noActiveRecipe"
      ></app-recipe-detail>
      <ng-template #noActiveRecipe>
        <p>Please select a recipe to view the detailed information</p>
      </ng-template>
    </div>
  </div>
  

• VM 层修改

  @Component({
    selector: 'app-recipes',
    templateUrl: './recipes.component.html',
    providers: [RecipeService],
  })
  export class RecipesComponent implements OnInit, OnDestroy {
    activeRecipe: Recipe;
  
    constructor(private recipeService: RecipeService) {}
  
    ngOnInit() {
      this.recipeService.recipeSelected.subscribe((recipe: Recipe) => {
        this.activeRecipe = recipe;
      });
    }
  
    ngOnDestroy(): void {
      this.recipeService.recipeSelected.unsubscribe();
    }
  }
  

这里主要是对 V 层进行了一些修改，减少了一些数据绑定。大多数的用法这里都是之前在 service 的笔记中提到的，除了这个 subscribe 的使用

简单的说，在 subscribe 之后，每一次 event 触发后，在这个 subscription 里，它都可以获取 event 中传来的信息，并进行对应的更新操作

recipe-list 组件的修改

• V 层修改如下

  <div class="row">
    <div class="col-xs-12">
      <button class="btn btn-success">New Recipe</button>
    </div>
  </div>
  <hr />
  <div class="row">
    <div class="col-xs-12">
      <app-recipe-item
        *ngFor="let recipe of recipes"
        [recipe]="recipe"
      ></app-recipe-item>
    </div>
  </div>
  

• VM 层修改如下

  @Component({
    selector: 'app-recipe-list',
    templateUrl: './recipe-list.component.html',
    styleUrl: './recipe-list.component.css',
  })
  export class RecipeListComponent implements OnInit {
    recipes: Recipe[];
  
    constructor(private recipeService: RecipeService) {}
  
    ngOnInit() {
      this.recipes = this.recipeService.recipes;
    }
  }
  

这里主要就是获取数据的方式变了，也不需要向下传递 @Input，向上触发 @Output 了

reccipe-item 组件的修改

• V 层

  <a
    href="#"
    class="list-group-item clearfix"
    (click)="onSelectedRecipe()"
    [ngClass]="{ active: isActiveRecipe }"
  >
    <div class="pull-left">
      <h4 class="list-group-item-heading">{{ recipe.name }}</h4>
      <p class="list-group-item-text">{{ recipe.description }}</p>
    </div>
    <span class="pull-right">
      <img
        [src]="recipe.imagePath"
        [alt]="recipe.name"
        class="image-responsive"
        style="max-height: 50px"
      />
    </span>
  </a>
  

  这里做的另外一个修改就是把 a 标签移到了 list-item 去处理，这样语义化相对更好一些

• VM 层

  @Component({
    selector: 'app-recipe-item',
    templateUrl: './recipe-item.component.html',
    styleUrl: './recipe-item.component.css',
  })
  export class RecipeItemComponent implements OnInit, OnDestroy {
    @Input() recipe: Recipe;
    isActiveRecipe = false;
  
    constructor(private recipeService: RecipeService) {}
  
    ngOnInit() {
      this.recipeService.recipeSelected.subscribe((recipe: Recipe) => {
        this.isActiveRecipe = recipe.isEqual(this.recipe);
      });
    }
  
    onSelectedRecipe() {
      this.recipeService.recipeSelected.emit(this.recipe);
    }
  
    ngOnDestroy(): void {
      this.recipeService.recipeSelected.unsubscribe();
    }
  }
  

  这里变化稍微有一点多，主要也是针对 activeRecipe 和 onSelectedRecipe 的修改。

  前者的判断我在 model 写了一个 isEqual 的方法用来判断名字、数量、图片等是否一样，当然只用这个方法的话还是有可能会出现数据碰撞的，因此写案例的时候我尽量不会用同一个名字去命名 ingredient。基于这个前提下，那么就可以判断当前的 recipe 是不是被选中的 recipe，同时添加 active 这一类名做更好的提示

  使用 subscribe 也是基于同样的理由，需要捕获 recipe 的变动

  onSelectedRecipe 的变化倒是没有太多，同样会触发一个事件，不过这个事件现在保存在 recipeService 中

  目前的实现是整个 recipe 都共享一个 service，因此这里 emit 的事件，在整个 recipe 组件下，只要 subscribe 了，就只会是同一个事件

recipe-detail 组件的修改

• V 层

  <div class="row">
    <div class="col-xs-12">
      <img
        src="{{ activeRecipe.imagePath }}"
        alt=" {{ activeRecipe.name }} "
        class="img-responsive"
      />
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12">
      <h1>{{ activeRecipe.name }}</h1>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12">
      <div class="btn-group" appDropdown>
        <button type="button" class="btn btn-primary dropdown-toggle">
          Manage Recipe <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
          <li>
            <a href="#" (click)="onAddToShoppingList()">To Shopping List</a>
          </li>
          <li><a href="#">Edit Recipe</a></li>
          <li><a href="#">Delete Recipe</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12">{{ activeRecipe.description }}</div>
  </div>
  <div class="row">
    <div class="col-xs-12">
      <ul class="list-group">
        <li
          class="list-group-item"
          *ngFor="let ingredient of activeRecipe.ingredients"
        >
          {{ ingredient.name }} - {{ ingredient.amount }}
        </li>
      </ul>
    </div>
  </div>
  

• VM 层

  @Component({
    selector: 'app-recipe-detail',
    templateUrl: './recipe-detail.component.html',
    styleUrl: './recipe-detail.component.css',
  })
  export class RecipeDetailComponent {
    @Input() activeRecipe: Recipe;
  
    constructor(private ingredientService: IngredientService) {}
  
    onAddToShoppingList() {
      this.ingredientService.addIngredients(this.activeRecipe.ingredients);
    }
  }
  

这里通过调用 ingredient service 将当前 recipe 中的 ingredient 送到 shopping-list 的 view 下，效果如下：

这里没有做 unique key 的检查，而且实现是通过 Array.push 去做的，因此只会无限增加，而不是更新已有的元素。不过大致可以看到这个跨组件的交流是怎么实现的

修改 shopping-list

这里的实现和 recipe 差不多，就只贴代码了

shopping-list 组件的修改

• V 层

  <div class="row">
    <div class="col-xs-10">
      <app-shopping-edit></app-shopping-edit>
      <hr />
      <ul class="list-group">
        <a
          class="list-group-item"
          style="cursor: pointer"
          *ngFor="let ingredient of ingredients"
        >
          {{ ingredient.name }} ({{ ingredient.amount }})
        </a>
      </ul>
    </div>
  </div>
  

• VM 层

  @Component({
    selector: 'app-shopping-list',
    templateUrl: './shopping-list.component.html',
    styleUrl: './shopping-list.component.css',
  })
  export class ShoppingListComponent implements OnInit, OnDestroy {
    ingredients: Ingredient[] = [];
  
    constructor(private ingredientService: IngredientService) {}
  
    ngOnInit(): void {
      this.ingredients = this.ingredientService.ingredients;
      this.ingredientService.ingredientChanged.subscribe(
        (ingredients: Ingredient[]) => {
          this.ingredients = ingredients;
        }
      );
    }
  
    ngOnDestroy(): void {
      this.ingredientService.ingredientChanged.unsubscribe();
    }
  }
  

同样也是一个 subscription 的实现去动态监听 ingredients 的变化

shopping-edit 组件的修改

• V 层

  <div class="row">
    <div class="col-xs-12">
      <form>
        <div class="row">
          <div class="col-sm-5 form-group">
            <label for="name">Name</label>
            <input type="text" id="name" class="form-control" #nameInput />
          </div>
          <div class="col-sm-2 form-group">
            <label for="amount">Amount</label>
            <input
              type="number"
              id="amount"
              class="form-control"
              #amountInput
            />
          </div>
        </div>
        <div class="row">
          <div class="col-xs-12">
            <div class="btn-toolbar">
              <button
                class="btn btn-success mr-2"
                type="submit"
                (click)="onAddIngredient(nameInput)"
              >
                Add
              </button>
              <button class="btn btn-danger mr-2" type="button">Delete</button>
              <button class="btn btn-primary" type="button">Edit</button>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
  

  这里添加了一个按钮的功能，实现添加 ingredient

• VM 层

  @Component({
    selector: 'app-shopping-edit',
    templateUrl: './shopping-edit.component.html',
    styleUrl: './shopping-edit.component.css',
  })
  export class ShoppingEditComponent {
    @ViewChild('amountInput', { static: true })
    amountInput: ElementRef;
  
    constructor(private ingredientService: IngredientService) {}
  
    onAddIngredient(nameInput: HTMLInputElement) {
      this.ingredientService.addIngredient(
        new Ingredient(nameInput.value, this.amountInput.nativeElement.value)
      );
    }
  }
  

  这里的 onAddIngredient 实现方式和添加整个 list 基本一致，也就不多赘述了