• Use method as follows, super convenient bar!
<div class="container">
  <div class="card" *get="let item of src; code as code; msg as msg; url as url;">
    <div class="card-header">{{SRC}}</div>
    <div class="card-body">Status code: {{code}}<br>Note: {{MSG}}<br>Return the data: {{item | json}}<br>Request link: {{url}}</div>
  </div>

  <div class="card" *post="let item of src; params params; body {id: 2}; code as code; msg as msg; url as url;">
    <div class="card-header">POST request interface :{{SRC}}</div>
    <div class="card-body">Status code: {{code}}<br>Note: {{MSG}}<br>Return the data: {{item | json}}<br>Request link: {{url}}<br>The request data: {{params | json}}</div>
  </div>
</div>
Copy the code
  • The get wrapped
import { Directive, Input, ViewContainerRef, TemplateRef } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { UrlService } from "./url.service";
/* *get="let item of url" */
@Directive({
  selector: "[get][getOf]"
})
export class GetDirective {
  @Input() getOf: string;
  @Input() getParams: string;

  constructor(
    public http: HttpClient,
    public view: ViewContainerRef,
    public template: TemplateRef<any>,
    public url: UrlService
  ) {}

  ngOnInit() {
    let url = this.url.getOpenUrl(this.getOf, this.getParams);
    this.http.get(url).subscribe((res: any) = > {
      this.view.createEmbeddedView(this.template, { $implicit: res.data, code: res.code, msg: res.msg, url: url }); }); }}Copy the code
  • The post package
import { Directive, Input, ViewContainerRef, TemplateRef } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { UrlService } from "./url.service";
/*
  *post="let item of url;params params;"
*/
@Directive({
  selector: "[post][postOf]"
})
export class PostDirective {
  @Input() postOf: string;
  @Input() postParams: any;
  @Input() postBody: any;
  constructor(
    public http: HttpClient,
    public view: ViewContainerRef,
    public template: TemplateRef<any>,
    public url: UrlService
  ) {}

  ngOnInit() {
    let url = this.url.getOpenUrl(this.postOf, this.postParams);
    this.http.post(url, this.postBody).subscribe((res: any) = > {
      this.view.createEmbeddedView(this.template, { $implicit: res.data, code: res.code, msg: res.msg, url: url }); }); }}Copy the code

The installation

yarn add iwe7-http
Copy the code

conclusion

Sigh I big NG powerful! iwe7-http

Angular5 Simple violence encapsulation table, combat dry goods