Angularのメタサービスを使用して情報を取得、追加、更新、および削除する方法
序章
AngularのMetaサービスを使用すると、アプリで現在アクティブなルートに応じて、さまざまなmeta
タグを取得または設定できます。
注:AngularMetaサービスはAngular4以降で利用できます。
その使用法と利用可能な方法を見ていきましょう。
前提条件
この記事をフォローしたい場合は、次のものが必要になります。
- HTMLメタ要素にある程度精通している。
- Angularサービスにある程度精通している。
このチュートリアルは、ノードv16.2.0、npm
v7.15.1、およびangular
v12.0.3で検証されました。
addTag
およびaddTags
を使用する
メタサービスを使用するには、@angular/platform-browser
からインポートして、コンポーネントまたはサービスに挿入する必要があります。
import { Meta } from '@angular/platform-browser';
複数のmeta
タグを使用すると、代わりにaddTags
メソッドを使用して、それらすべてを同じ呼び出しに設定できます。
コンポーネントがロードされたときにTwitterカードにmeta
タグを追加する例を次に示します。
constructor(private meta: Meta) { this.meta.addTags([ { name: 'twitter:card', content: 'summary_large_image' }, { name: 'twitter:site', content: '@alligatorio' }, // ... ]); }
このコードは、ページに次の結果を生成します。
Output<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@alligatorio">
addTag
とaddTags
はどちらも、タグがすでに存在する場合でも、タグを作成する必要があるかどうかを示す2番目のブール引数を取ることができることに注意してください。
たとえば、タグは2回追加されます。
constructor(private meta: Meta) { this.meta.addTags([ { name: 'twitter:site', content: '@alligatorio' }, { name: 'twitter:site', content: '@alligatorio' } ], true); } }
このコードは、ページに次の結果を生成します。
Output<meta name="twitter:site" content="@alligatorio"> <meta name="twitter:site" content="@alligatorio">
addTag
およびaddTags
を使用すると、新しいmeta
タグを追加できます。
getTag
およびgetTags
を使用する
addTag
およびaddTags
メソッドと同様に、getTag
およびgetTags
メソッドもあります。
次のmeta
タグを持つアプリケーションについて考えてみます。
<meta name="viewport" content="width=device-width, initial-scale=1">
getTag
の使用例を次に示します。
constructor(private meta: Meta) { const viewport = this.meta.getTag('name=viewport'); if (viewport) console.log(viewport.content); }
コンテンツはコンソールに出力されます。
Outputwidth=device-width, initial-scale=1
getTag
は、属性セレクター文字列を受け取り、HTMLMetaElement
を返します。 getTags
も属性セレクターを取りますが、セレクターに一致する可能性のある複数のHTMLMetaElements
を持つ配列を返します。
updateTag
を使用する
新しいmeta
タグ定義とセレクターを指定すると、updateTag
メソッドはセレクターに一致するすべてのタグを更新します。
以下のやや工夫された例では、最初にmeta
タグにsummary_large_image
のcontent
を設定し、次にそれをsummary
だけに更新します。
constructor(private meta: Meta) { this.meta.addTag( { name: 'twitter:card', content: 'summary_large_image' } ); this.meta.updateTag( { name: 'twitter:card', content: 'summary' }, `name='twitter:card'` ); }
実際のアプリでは、代わりに、アプリにグローバルに存在するmeta
タグを更新する必要がありますが、アクティブなルートに応じて異なる値をとる必要があります。
removeTag
およびremoveTagElement
を使用する
removeTag
メソッドは、属性セレクターの文字列を受け取り、タグを削除します。
次のmeta
タグを持つアプリケーションについて考えてみます。
<meta charset="utf-8">
これを実行したいというわけではありませんが、charset
meta
タグを削除する方法は次のとおりです。
constructor(private meta: Meta) { this.meta.removeTag('charset'); }
removeTagElement
も同様ですが、文字列セレクターの代わりにHTMLTagElement
を直接使用します。
同じ例ですが、最初にcharset
meta
タグ要素を取得します。
constructor(private meta: Meta) { const charsetTag = this.meta.getTag('charset'); if (charsetTag) this.meta.removeTagElement(charsetTag); }
どちらのアプローチでも、meta
要素が削除されます。
結論
この記事では、AngularのMetaサービスを使用して、meta
タグを取得、追加、更新、および削除する方法を学習しました。
ngrx
を使用してページタイトルを宣言的に更新するに関するガイドで学習を続けてください。