実装ガイド

Angular 統合

モダンなライフサイクルフックでTagticsを統合します。クライアントがルート変更を自動で処理します。

初期化

アプリのマウント時に init を、アンマウント時に destroy を呼び出してメモリリークを防ぎます。

import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({...})
export class AppComponent implements OnInit, OnDestroy {
  private script?: HTMLScriptElement;

  ngOnInit() {
    this.script = document.createElement('script');
    this.script.src = 'https://cdn.tagtics.online/client.js';
    this.script.async = true;
    this.script.onload = () => {
      (window as any).Tagtics?.init({ apiKey: 'YOUR_API_KEY' });
    };
    document.body.appendChild(this.script);
  }

  ngOnDestroy() {
    (window as any).Tagtics?.destroy();
    this.script?.remove();
  }
}

実装ガイド

Angular 統合

モダンなライフサイクルフックでTagticsを統合します。クライアントがルート変更を自動で処理します。

初期化

アプリのマウント時に init を、アンマウント時に destroy を呼び出してメモリリークを防ぎます。

import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({...})
export class AppComponent implements OnInit, OnDestroy {
  private script?: HTMLScriptElement;

  ngOnInit() {
    this.script = document.createElement('script');
    this.script.src = 'https://cdn.tagtics.online/client.js';
    this.script.async = true;
    this.script.onload = () => {
      (window as any).Tagtics?.init({ apiKey: 'YOUR_API_KEY' });
    };
    document.body.appendChild(this.script);
  }

  ngOnDestroy() {
    (window as any).Tagtics?.destroy();
    this.script?.remove();
  }
}