Angular SDK

Gói @tracio/angular bao bọc @tracio/sdk lõi và cung cấp các primitive Angular đúng phong cách: một provider mà bạn spread vào cấu hình ứng dụng, và một service dựa trên signal mà bạn có thể inject ở bất cứ đâu.

Cài đặt

bash

npm install @tracio/angular @tracio/sdk

@angular/core (17, 18 hoặc 19) là một peer dependency và được giả định là đã được cài đặt sẵn trong ứng dụng của bạn.

Thiết lập

Spread provideTracio(config) vào ApplicationConfig.providers của bạn.

TypeScript

// app.config.ts
import { provideTracio } from "@tracio/angular"
export const appConfig: ApplicationConfig = {
  providers: [provideTracio({ publicKey: "5ca175fc…" })],
}

Service

Inject TracioService để đọc trạng thái nhận dạng thông qua các signal readonly:

Thành phần	Kiểu	Mô tả
`visitorId()`	`Signal<string \| null>`	Định danh khách truy cập ổn định.
`result()`	`Signal<TracioResult \| null>`	Kết quả nhận dạng đầy đủ.
`error()`	`Signal<TracioError \| null>`	Lỗi gần nhất, nếu có.
`isLoading()`	`Signal<boolean>`	Liệu có một lượt fetch đang diễn ra.
`getVisitorData()`	method	Lấy (lại) dữ liệu khách truy cập theo cách imperative.

TypeScript

// home.component.ts
import { Component, inject } from "@angular/core"
import { TracioService } from "@tracio/angular"
@Component({ selector: "app-home", template: `<span>{{ tracio.visitorId() }}</span>` })
export class HomeComponent {
  readonly tracio = inject(TracioService)
}

Gọi getVisitorData() để hoãn hoặc kích hoạt lại quá trình nhận dạng — ví dụ chỉ sau khi người dùng đã cấp sự đồng ý.

Ví dụ đầy đủ

TypeScript

// app.config.ts
import { provideTracio } from "@tracio/angular"
export const appConfig: ApplicationConfig = {
  providers: [provideTracio({ publicKey: "5ca175fc…" })],
}

TypeScript

// home.component.ts
import { Component, inject } from "@angular/core"
import { TracioService } from "@tracio/angular"
@Component({ selector: "app-home", template: `<span>{{ tracio.visitorId() }}</span>` })
export class HomeComponent {
  readonly tracio = inject(TracioService)
}

Các bước tiếp theo

Tài liệu tham khảo JavaScript SDK — API @tracio/sdk lõi mà service được xây dựng dựa trên
Xử lý lỗi — mã lỗi và các chiến lược retry
Tổng quan về SDK — mọi gói framework trong nháy mắt

Service

Inject TracioService để đọc trạng thái nhận dạng thông qua các signal readonly:

Thành phần

Kiểu

Mô tả

visitorId()

Signal<string | null>

Định danh khách truy cập ổn định.

result()

Signal<TracioResult | null>

Kết quả nhận dạng đầy đủ.

error()

Signal<TracioError | null>

Lỗi gần nhất, nếu có.

isLoading()

Signal<boolean>

Liệu có một lượt fetch đang diễn ra.

getVisitorData()

method

Lấy (lại) dữ liệu khách truy cập theo cách imperative.

TypeScript

// home.component.ts
import { Component, inject } from "@angular/core"
import { TracioService } from "@tracio/angular"
@Component({ selector: "app-home", template: `<span>{{ tracio.visitorId() }}</span>` })
export class HomeComponent {
  readonly tracio = inject(TracioService)
}

Gọi getVisitorData() để hoãn hoặc kích hoạt lại quá trình nhận dạng — ví dụ chỉ sau khi người dùng đã cấp sự đồng ý.

Ví dụ đầy đủ

TypeScript

// app.config.ts
import { provideTracio } from "@tracio/angular"
export const appConfig: ApplicationConfig = {
  providers: [provideTracio({ publicKey: "5ca175fc…" })],
}

TypeScript

// home.component.ts
import { Component, inject } from "@angular/core"
import { TracioService } from "@tracio/angular"
@Component({ selector: "app-home", template: `<span>{{ tracio.visitorId() }}</span>` })
export class HomeComponent {
  readonly tracio = inject(TracioService)
}