Angualr6访问API

参照 草根专栏- ASP.NET Core + Ng6 实战： https://v.qq.com/x/page/a0769armuui.html

 

1、environment.ts 添加apiUrlBase(资源访问Api地址):

export const environment = {
  production: false ,
  apiUrlBase: 'https://localhost:6001/api'
};

2、添加父类service：

        ng g s shared/base

import { Injectable } from '@angular/core';
import { environment } from '../../environments/environment';

@Injectable({
  providedIn: 'root'
})
export class BaseService {

  apiUrlBase = environment.apiUrlBase;

  constructor() { }
}

 

3、添加 Post service

       ng g s blog/services/post

 

4、blog.module.ts 引用 service

  providers: [
    PostService
  ]

 

5、ng g c blog/components/post-list

6、添加二层路由： sidenav.component.html

  <div class="app-sidenav-content">
    <app-toolbar (toggleSidenav)="drawer.toggle()"></app-toolbar>
    <router-outlet></router-outlet>
  </div>

 

7、注册二层子路由

const routes: Routes = [
  {
    path: '', component: BlogAppComponent,
    children : [
      {path: 'post-list' , component: PostListComponent },
      {path: '**' , redirectTo: 'post-list' }
    ]
}

];

8、service获取数据：

 

9、跨域配置

        public void ConfigureServices(IServiceCollection services)
        {
 
            //配置跨域
            services.AddCors(options =>
            {
                options.AddPolicy("AllowAngularDevOrigin",
                    builder => builder.WithOrigins("http://localhost:4200")
                        .WithExposedHeaders("X-Pagination")
                        .AllowAnyHeader()
                        .AllowAnyMethod());
            });

            services.Configure<MvcOptions>(options =>
            {
                options.Filters.Add(new CorsAuthorizationFilterFactory("AllowAngularDevOrigin"));//跨域配置
                var policy = new AuthorizationPolicyBuilder()
                    .RequireAuthenticatedUser()
                    .Build();
                options.Filters.Add(new AuthorizeFilter(policy));
            });


        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IHostingEnvironment env,ILoggerFactory loggerFactory)
        {

            app.UseCors("AllowAngularDevOrigin");//跨域配置
 
        }

 

10、建立   proxy.conf.js  配置

const PROXY_CONFIG = [
    {
        context: [
            "/api"
        ],
        target: "http://localhost:3000",
        secure: false
    }
]

module.exports = PROXY_CONFIG;

 

11、angular.json中配置：

        "proxyConfig": "src/proxy.conf.js"

 

12、获取api header数据：

  getPosts() {
    this.postService.getPagedPosts(this.postParameter).subscribe(resp => {
      this.pageMeta = JSON.parse(resp.headers.get('X-Pagination')) as PageMeta;
    });
  }

13、获取body数据：

        建立entity.ts    post.ts   link.ts      result-with-links      page-meta.ts   接受body传输的数据：

 

14、post-list.component.ts 中解析

@Component({
  selector: 'app-post-list',
  templateUrl: './post-list.component.html',
  styleUrls: ['./post-list.component.scss']
})
export class PostListComponent implements OnInit {

  postParameter = new PostParameters({ orderBy: 'id desc', pageSize: 10, pageIndex: 0 });
  posts: Post[];
  pageMeta: PageMeta;
  constructor(private postService: PostService) { }

  ngOnInit() {
    this.getPosts();
  }


  getPosts() {
    this.postService.getPagedPosts(this.postParameter).subscribe(resp => {
      this.pageMeta = JSON.parse(resp.headers.get('X-Pagination')) as PageMeta;
      const result = {...resp.body} as ResultWithLinks<Post>;
      this.posts = result.value;
    });
  }

}

 

15、post-list.component.html显示数据

<div *ngIf="!pageMeta">
  <mat-spinner></mat-spinner>
</div>
<div *ngIf="pageMeta">
  <ng-container *ngFor="let item of posts">
    {{item.title}}
  </ng-container>

</div>