angular-destroyref について
Angular 開発者向けに DestroyRef によるリソース解放を解説するリファレンスです。コンポーネントやサービスで takeUntilDestroyed を使い、ライフサイクルに応じて Observable の購読を終了する方法を示します。
主な機能
- 01takeUntilDestroyed の使用
- 02コンポーネント購読の解放
- 03サービスでのクリーンアップ適用
活用シーン
- 01コンポーネントのライフサイクルに合わせて購読を終了
- 02サービス内の Observable をクリーンアップ
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/ / github.com/ oguzhan18/ angular-ecosystem-skills --skill angular-destroyrefインストール後、Claude Code で/angular-destroyrefを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
references/discussions/_INDEX.mdreferences/docs/_INDEX.mdreferences/issues/_INDEX.mdreferences/releases/_INDEX.mdREADME(原文)English
プロジェクトの README よりこの README の日本語訳はまだありません。以下は英語の原文です。日本語の紹介はページ上部をご覧ください。
Angular DestroyRef
Version: Angular 16+ (2025) Tags: DestroyRef, Cleanup, takeUntilDestroyed
References: DestroyRef
Best Practices
- Use takeUntilDestroyed
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@Component({})
export class MyComponent {
private destroyRef = inject(DestroyRef);
ngOnInit() {
this.data$.pipe(
takeUntilDestroyed(this.destroyRef)
).subscribe();
}
}
- Use in service
@Injectable({ providedIn: 'root' })
export class DataService {
private destroyRef = inject(DestroyRef);
getData() {
return this.http.get('/api/data').pipe(
takeUntilDestroyed(this.destroyRef)
);
}
}
コメント
Markdown 対応