Angular SDK

@tracio/angular 包封装了核心的 @tracio/sdk，并暴露出符合 Angular 惯用法的原语：一个可展开到应用配置中的提供程序（provider），以及一个可在任意位置注入的、基于 signal 的服务。

安装

bash

npm install @tracio/angular @tracio/sdk

@angular/core（17、18 或 19）是一个 peer dependency，假定已在你的应用中安装。

设置

将 provideTracio(config) 展开到你的 ApplicationConfig.providers 中。

TypeScript

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

服务

注入 TracioService，通过只读 signal 读取识别状态：

成员	类型	说明
`visitorId()`	`Signal<string \| null>`	稳定的访客标识符。
`result()`	`Signal<TracioResult \| null>`	完整的识别结果。
`error()`	`Signal<TracioError \| null>`	最近一次错误（如有）。
`isLoading()`	`Signal<boolean>`	是否有请求正在进行中。
`getVisitorData()`	方法	以命令式方式（重新）获取访客数据。

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)
}

调用 getVisitorData() 可以推迟或重新触发识别——例如仅在用户授予同意之后再执行。

完整示例

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)
}

后续步骤

JavaScript SDK 参考 —— 该服务所基于的核心 @tracio/sdk API
错误处理 —— 错误码与重试策略
SDK 总览 —— 一览所有框架包

服务

注入 TracioService，通过只读 signal 读取识别状态：

成员

类型

说明

visitorId()

Signal<string | null>

稳定的访客标识符。

result()

Signal<TracioResult | null>

完整的识别结果。

error()

Signal<TracioError | null>

最近一次错误（如有）。

isLoading()

Signal<boolean>

是否有请求正在进行中。

getVisitorData()

方法

以命令式方式（重新）获取访客数据。

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)
}

调用 getVisitorData() 可以推迟或重新触发识别——例如仅在用户授予同意之后再执行。

完整示例

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)
}