Angular

如果您想在 Angular 应用程序中使用 CKBox，请首先安装 ckbox 包，如 本指南 中所述。然后，在 Angular 组件中，访问对 <div /> 元素的引用，并使用它在 ngAfterViewInit 生命周期方法中实例化 CKBox。

下面是示例 Angular 组件文件的内容

import { AfterViewInit, Component, ElementRef, ViewChild } from "@angular/core";
import * as CKBox from "ckbox";

@Component({
    selector: "ckbox-sample",
    templateUrl: "./ckbox-sample.component.html",
    styleUrls: ["./ckbox-sample.component.css"],
})
export class CKBoxSampleComponent implements AfterViewInit {
    @ViewChild("ckbox") ckboxRoot?: ElementRef;

    ngAfterViewInit(): void {
        CKBox.mount(this.ckboxRoot?.nativeElement, {
            tokenUrl: "https://your.token.url",
        });
    }
}

将以下代码片段放置在组件的模板文件中

<div #ckbox></div>

最后，将样式添加到根 styles.css 文件中

@import "../node_modules/ckbox/dist/styles/ckbox.css";