Angularのメタサービスを使用して情報を取得、追加、更新、および削除する方法

序章

AngularのMetaサービスを使用すると、アプリで現在アクティブなルートに応じて、さまざまなmetaタグを取得または設定できます。

注：AngularMetaサービスはAngular4以降で利用できます。

その使用法と利用可能な方法を見ていきましょう。

前提条件

この記事をフォローしたい場合は、次のものが必要になります。

• HTMLメタ要素にある程度精通している。
• Angularサービスにある程度精通している。

このチュートリアルは、ノードv16.2.0、npm v7.15.1、およびangularv12.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">

これを実行したいというわけではありませんが、charsetmetaタグを削除する方法は次のとおりです。

constructor(private meta: Meta) {
  this.meta.removeTag('charset');
}

removeTagElementも同様ですが、文字列セレクターの代わりにHTMLTagElementを直接使用します。

同じ例ですが、最初にcharsetmetaタグ要素を取得します。

constructor(private meta: Meta) {
  const charsetTag = this.meta.getTag('charset');
  if (charsetTag) this.meta.removeTagElement(charsetTag);
}

どちらのアプローチでも、meta要素が削除されます。

結論

この記事では、AngularのMetaサービスを使用して、metaタグを取得、追加、更新、および削除する方法を学習しました。

ngrxを使用してページタイトルを宣言的に更新するに関するガイドで学習を続けてください。