Question

登录任何用户并查看一个其他用户的名称列表，并且名称前面有一个按钮“跟随”，单击“跟随”按钮后，它将切换并更改名称为“取消关注”。遵循取消关注的角度功能？

在数据库中，我有用户表，我必须创建一个新的关注表（需要执行此列），要遵循哪种类型的查询，要取消关注哪种类型的查询？

Answer 1

//here is toggle button code 
//twitter-component.html

<style>
    .followup{
        color: red
    }

    .unfollow{
        color: green
    }
</style> 
<form>

<button [ngClass]="{'followup' : isFollow == true,
    'unfollow' : isFollow== false }" 
    (click)="onClick()">
    {{isFollow == true ? 'Unfollow' : (isFollow == false ? 'Follow' : '')}}
</button>
</form>

//twitter-component.ts

export class TwitterComponent implements OnInit {

  public isFollow: boolean = false;
  ngOnInit() {

  }

  onClick(){
    this.isFollow = !this.isFollow;

  }
}

Answer 2

这是示例代码，您可以使用数据值来检查订阅和取消订阅。

//twitter-component.ts

import { TestDataServiceService } from '../services/twitter-data-service.service';
export class TwitterComponent implements OnInit {

  public newTwitterPostDataToShowOnView: string

  constructor(private data: TestDataServiceService) { }

  followClick() {
    this.data.twitterPostedData.subscribe(postData =>
      this.newTwitterPostDataToShowOnView = postData);
  }

  unFollowClick() {
    this.data.newTwitterPostSource.unsubscribe()
  }
}

//twitter-data-service.service.ts 

import { BehaviorSubject } from 'rxjs';
@Injectable()
export class TwitterDataServiceService {
  //Behavior Subject is empty as there would be no default post initially
  private newTwitterPostSource = new BehaviorSubject("");
  twitterPostedData = this.newTwitterPostSource.asObservable();

  TwitterPostPublished(newTwitterPostData: string) {
    this.newTwitterPostSource.next(newTwitterPostData);
    //error method is optional
    this.newTwitterPostSource.error(err => console.log(err));
    //complete method is optional
    this.newTwitterPostSource.complete();
  }
}

有关Twitter类型的基本思路遵循/取消关注角度功能？

2 个答案: