开始使用 Angular
¥Getting Started with Angular
Strapi 文档团队专注于改进 Strapi 5 核心体验的文档。我们将在未来 6 个月内发布许多更改，请密切关注👀。
¥The Strapi Documentation team focuses on improving the documentation for Strapi 5's core experience. We will release many changes in the next 6 months, so please keep an eye out 👀.
因此，当前页面现在仅处于维护模式，可能未完全与 Strapi 5 保持同步，并且很快将从 docs.strapi.io 中删除并移至 Strapi 的 集成页面。
¥As a result, the present page is now in maintenance mode only, might not be fully up-to-date with Strapi 5, and will soon be removed from docs.strapi.io and moved to Strapi's integrations page.
同时，如果你想帮助我们改进此页面，请随时 contribute 到文档的 GitHub 存储库。
¥In the meantime, if you want to help us improve this page, please feel free to contribute to the documentation's GitHub repository.
本集成指南遵循 快速入门指南 并假设你已完全完成 "动手实践" 路径。你应该能够通过浏览 URL http://localhost:1337/api/restaurants 使用该 API。
¥This integration guide follows the Quick Start Guide and assumes you have fully completed the "Hands-on" path. You should be able to consume the API by browsing the URL http://localhost:1337/api/restaurants.
如果你尚未阅读快速入门指南，则使用 Angular 请求 Strapi API 的方式将保持不变，只是你不获取相同的内容。
¥If you haven't gone through the Quick Start Guide, the way you request a Strapi API with Angular remains the same except that you do not fetch the same content.
创建一个 Angular 应用
¥Create a Angular app
使用 angular CLI 创建一个基本的 Angular 应用。
¥Create a basic Angular application using angular CLI.
npx -p @angular/cli ng new angular-app
使用 Angular HTTP 客户端
¥Use the Angular HTTP client
导入 Angular HttpClientModule：
¥Import the Angular HttpClientModule:
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { HttpClientModule } from "@angular/common/http";
import { AppComponent } from "./app.component";
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, HttpClientModule],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
GET 请求你的集合类型
¥GET Request your collection type
对 restaurant 集合类型执行 GET 请求以获取所有餐厅。
¥Execute a GET request on the restaurant collection type in order to fetch all your restaurants.
确保你激活了 restaurant 集合类型的 find 权限。
¥Be sure that you activated the find permission for the restaurant collection type.
// this.http is the Angular HttpClient service.
this.http
.get("http://localhost:1337/api/restaurants", {
params: { populate: "*" },
})
.subscribe((response) => {
console.log(response);
});
{
"data": [
{
"id": 1,
"attributes": {
"name": "Biscotte Restaurant",
"description": "Welcome to Biscotte restaurant! Restaurant Biscotte offers a cuisine based on fresh, quality products, often local, organic when possible, and always produced by passionate producers.",
"createdAt": "2023-03-25T11:13:41.883Z",
"updatedAt": "2023-03-25T11:17:45.737Z",
"publishedAt": "2023-03-25T11:17:45.735Z",
"categories": {
"data": [
{
"id": 2,
"attributes": {
"name": "Brunch",
"createdAt": "2023-03-25T11:14:20.605Z",
"updatedAt": "2023-03-25T11:17:00.158Z",
"publishedAt": "2023-03-25T11:17:00.153Z"
}
}
]
}
}
}
],
"meta": {
"pagination": {
"page": 1,
"pageSize": 25,
"pageCount": 1,
"total": 1
}
}
}
示例
¥Example
import { HttpClient, HttpErrorResponse } from "@angular/common/http";
import { Component, OnInit } from "@angular/core";
import { catchError, map, Observable, of } from "rxjs";
interface Restaurant {
name: string;
description: string;
}
interface Entry<T> {
id: number;
attributes: T;
}
interface Response {
data: Entry<Restaurant>[];
}
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"],
})
export class AppComponent implements OnInit {
error: any | undefined;
restaurants$: Observable<Restaurant[]> | undefined;
constructor(private http: HttpClient) {}
ngOnInit(): void {
const url = "http://localhost:1337/api/restaurants";
const opts = { params: { populate: "*" } };
this.restaurants$ = this.http.get<Response>(url, opts).pipe(
catchError((error) => this.handleError(error)),
map((response) => response.data.map((x) => x.attributes))
);
}
private handleError(error: HttpErrorResponse): Observable<never> {
this.error = error;
return of();
}
}
<div *ngIf="error">{{error}}</div>
<ul *ngIf="restaurants$|async as restaurants">
<li *ngFor="let restaurant of restaurants">{{restaurant.name}}</li>
</ul>
POST 请求你的集合类型
¥POST Request your collection type
对 restaurant 集合类型执行 POST 请求以创建餐厅。
¥Execute a POST request on the restaurant collection type in order to create a restaurant.
请确保你激活了 restaurant 集合类型的 create 权限和 category 集合类型的 find 权限。
¥Be sure that you activated the create permission for the restaurant collection type and the find permission fot the category collection type.
在此示例中，已创建 japanese 类别，其 ID 为：3.
¥In this example a japanese category has been created which has the id: 3.
// this.http is the Angular HttpClient service.
this.http
.post("http://localhost:1337/api/restaurants", {
data: {
name: "Dolemon Sushi",
description:
"Unmissable Japanese Sushi restaurant. The cheese and salmon makis are delicious",
categories: [3],
},
})
.subscribe((response) => {
console.log(response);
});
{
"id": 2,
"name": "Dolemon Sushi",
"description": "Unmissable Japanese Sushi restaurant. The cheese and salmon makis are delicious",
"created_by": null,
"updated_by": null,
"created_at": "2020-08-04T09:57:11.669Z",
"updated_at": "2020-08-04T09:57:11.669Z",
"categories": [
{
"id": 3,
"name": "Japanese",
"created_by": 1,
"updated_by": 1,
"created_at": "2020-07-31T11:36:23.164Z",
"updated_at": "2020-07-31T11:36:23.172Z"
}
]
}
示例
¥Example
import { HttpClientModule } from "@angular/common/http";
import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { AppComponent } from "./app.component";
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, FormsModule, HttpClientModule],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
./src/app/app.component.ts
import { Component, OnInit } from '@angular/core';
import { FormArray, FormBuilder } from '@angular/forms';
import { catchError, map, Observable, of, tap } from 'rxjs';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
interface Category {
name: string;
}
interface Entry<T> {
id: number;
attributes: T;
}
interface Response<T> {
data: Entry<T>[];
}
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
allCategories$: Observable<Entry<Category>[]> | undefined;
error: any | undefined;
modifiedData = {
name: '',
description: '',
categories: new Array<{ id: number; checked: boolean }>(),
};
constructor(private http: HttpClient) {}
ngOnInit(): void {
this.allCategories$ = this.http
.get<Response<Category>>('http://localhost:1337/api/categories')
.pipe(
catchError((error) => this.handleError(error)),
map((response) => response.data),
tap((data) => {
data.forEach((x) => {
this.modifiedData.categories.push({ id: x.id, checked: false });
});
})
);
}
onSubmit(): void {
const body = {
data: {
name: this.modifiedData.name,
description: this.modifiedData.description,
categories: this.modifiedData.categories
.filter((x) => x.checked)
.map((x) => x.id),
},
};
this.http
.post('http://localhost:1337/api/restaurants', body)
.pipe(catchError((error) => this.handleError(error)))
.subscribe((response) => {
console.log(response);
this.resetForm();
});
}
private handleError(error: HttpErrorResponse): Observable<never> {
this.error = error.message;
return of();
}
private resetForm(): void {
this.modifiedData.name = '';
this.modifiedData.description = '';
this.modifiedData.categories.forEach((x) => (x.checked = false));
}
}
<div *ngIf="error">{{error}}</div>
<form (ngSubmit)="onSubmit()">
<div>
<label for="name"> Name </label>
<input name="name" type="text" [(ngModel)]="modifiedData.name" />
</div>
<div>
<label for="address"> Description </label>
<input
name="description"
type="text"
[(ngModel)]="modifiedData.description"
/>
</div>
<div *ngIf="allCategories$ | async as allCategories">
<br />
Select categories
<div *ngFor="let category of allCategories; index as i">
<label
>{{category.attributes.name}}
<input
type="checkbox"
name="category{{i}}"
[(ngModel)]="modifiedData.categories[i].checked"
/>
</label>
</div>
</div>
<button class="button" type="submit">Create</button>
</form>
PUT 请求你的集合类型
¥PUT Request your collection type
对 restaurant 集合类型执行 PUT 请求以更新餐厅的类别。
¥Execute a PUT request on the restaurant collection type in order to update the category of a restaurant.
确保你激活了 restaurant 集合类型的 put 权限。
¥Be sure that you activated the put permission for the restaurant collection type.
我们认为你的餐厅 ID 是 2。你的类别 ID 是 2。
¥We consider that the id of your restaurant is 2.
and the id of your category is 2.
// this.http is the Angular HttpClient service.
this.http
.put("http://localhost:1337/api/restaurants/2", {
data: {
categories: [2],
},
})
.subscribe((response) => {
console.log(response);
});
{
"data": [
{
"id": 1,
"attributes": {
"name": "Biscotte Restaurant",
"description": "Welcome to Biscotte restaurant! Restaurant Biscotte offers a cuisine based on fresh, quality products, often local, organic when possible, and always produced by passionate producers.",
"createdAt": "2022-05-23T09:41:46.762Z",
"updatedAt": "2022-05-23T09:44:32.424Z",
"publishedAt": "2022-05-23T09:44:32.423Z",
"categories": {
"data": [
{
"id": 2,
"attributes": {
"name": "Brunch",
"createdAt": "2022-05-23T09:42:16.764Z",
"updatedAt": "2022-05-23T09:44:21.534Z",
"publishedAt": "2022-05-23T09:44:21.532Z"
}
}
]
}
}
}
],
"meta": {
"pagination": {
"page": 1,
"pageSize": 25,
"pageCount": 1,
"total": 1
}
}
}