10. 如何：使用按钮组件关注和取消关注配置文件

Conduit用户可以关注和取消关注其他用户的资料。服务器API暴露了这样做的端点。因此，我们需要为我们的Profile服务添加follow和unfollow方法。

为ProfileService添加关注和取消关注方法

src/app/shared/services/profiles.service.ts

[...]
+  follow(username: string): Observable<Profile> {
+    return this.apiService.post('/profiles/' + username + '/follow')
+  }
+
+  unfollow(username: string): Observable<Profile> {
+    return this.apiService.delete('/profiles/' + username + '/follow')
+  }
+
 }

很好！现在让我们在ApiService中建立DELETE函数。

为我们的ApiService添加delete()

src/app/shared/services/api.service.ts

[...]
delete(path): Observable<any> {
   return this.http.delete(`${environment.api_url}${path}`, { headers: this.setHeaders() })
    .catch(this.formatErrors)
    .map((res:Response) => res.json());
}

现在让我们创建一个Follow按钮组件来调用这些方法。

创建FollowButtonComponent

src/app/shared/buttons/follow-button.component.html

<button
  class="btn btn-sm action-btn"
  [ngClass]="{ 'disabled': isSubmitting,
               'btn-outline-secondary': !profile.following,
               'btn-secondary': profile.following }"
  (click)="toggleFollowing()">
  <i class="ion-plus-round"></i>
  &nbsp;
  {{ profile.following ? 'Unfollow' : 'Follow' }} {{ profile.username }}
</button>

src/app/shared/buttons/follow-button.component.ts

import { Component, EventEmitter, Input, Output } from '@angular/core';
import { Router } from '@angular/router';
import { Profile } from '../models';
import { ProfilesService, UserService } from '../services';
@Component({
  selector: 'follow-button',
  templateUrl: './follow-button.component.html'
})
export class FollowButtonComponent {
  constructor(
    private profilesService: ProfilesService,
    private router: Router,
    private userService: UserService
  ) {}
  @Input() profile: Profile;
  @Output() onToggle = new EventEmitter<boolean>();
  isSubmitting = false;
  toggleFollowing() {
    this.isSubmitting = true;
    this.userService.isAuthenticated.subscribe(
      (authenticated) => {
        // Not authenticated? Push to login screen
        if (!authenticated) {
          this.router.navigateByUrl('/login');
          return;
        }
        // Follow this profile if we aren't already
        if (!this.profile.following) {
          this.profilesService.follow(this.profile.username)
          .subscribe(
            data => {
              this.isSubmitting = false;
              this.onToggle.emit(true);
            },
            err => this.isSubmitting = false
          );
        // Otherwise, unfollow this profile
        } else {
          this.profilesService.unfollow(this.profile.username)
          .subscribe(
            data => {
              this.isSubmitting = false;
              this.onToggle.emit(false);
            },
            err => this.isSubmitting = false
          );
        }
      }
    )
  }
}

通过桶和通过共享模块导出FollowButton。

为buttons文件夹创建一个新的桶。

src/app/shared/buttons/index.ts

export * from './follow-button.component';

并将 buttons 桶导出到主 /shared 桶中。

src/app/shared/index.ts

+export * from './buttons';
 export * from './layout';
 export * from './list-errors.component';
 export * from './models';
[...]

让我们在共享模块中导入并声明新的按钮。

src/app/shared/shared.module.ts

[...]
 import { HttpModule } from '@angular/http';
 import { RouterModule } from '@angular/router';
+import { FollowButtonComponent } from './buttons';
 import { ListErrorsComponent } from './list-errors.component';
 import { ShowAuthedDirective } from './show-authed.directive';
[...]
     RouterModule
   ],
   declarations: [
+    FollowButtonComponent,
     ListErrorsComponent,
     ShowAuthedDirective
   ],
   exports: [
     CommonModule,
+    FollowButtonComponent,
     FormsModule,
     ReactiveFormsModule,
     HttpModule,
[...]

现在我们只需把它放在个人资料页面上，所有的功能就可以使用了!

src/app/profile/profile.component.html

[...]
           <img [src]="profile.image" class="user-img" />
           <h4>{{ profile.username }}</h4>
           <p>{{ profile.bio }}</p>
+          <follow-button
+            [hidden]="isUser"
+            [profile]="profile"
+            (onToggle)="onToggleFollowing($event)">
+          </follow-button>
            <a [routerLink]="['/settings']"
               [hidden]="!isUser"
               class="btn btn-sm btn-outline-secondary action-btn">
[...]

你可以将你的代码与Github上的有效代码进行比较，或者在本地检查分支：

git checkout m-3