開発者ドキュメント

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

getdocs

序章

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

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

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

前提条件

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

このチュートリアルは、Nodev16.2.0で検証されました。 npm v7.15.1、および angular v12.0.3。

使用する addTag と addTags

メタサービスを使用するには、からインポートする必要があります @angular/platform-browser コンポーネントまたはサービスに注入します。

import { Meta } from '@angular/platform-browser';

複数で meta タグ、あなたは使用することができます addTags 代わりに、それらすべてを同じ呼び出しで設定するメソッド。

これが追加する例です meta コンポーネントがロードされたときのTwitterカードのタグ：

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);
}

コンテンツはコンソールに出力されます。

Output
width=device-width, initial-scale=1

getTag 属性セレクター文字列を受け取り、 HTMLMetaElement. getTags 属性セレクターも受け取りますが、複数の可能性がある配列を返します HTMLMetaElements セレクターと一致します。

使用する updateTag

与えられた新しい meta タグ定義とセレクター、 updateTag メソッドは、セレクターに一致するすべてのタグを更新します。

以下のやや工夫された例では、最初に meta タグ付き content の summary_large_image そしてそれをちょうどに更新します 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

The removeTag メソッドは属性セレクターの文字列を受け取り、タグを削除します。

次のようなアプリケーションを考えてみましょう meta 鬼ごっこ：

<meta charset="utf-8">

これを実行したいというわけではありませんが、削除する方法は次のとおりです。 charset meta 鬼ごっこ：

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

The removeTagElement 似ていますが、代わりに HTMLTagElement 文字列セレクターの代わりに直接。

これは同じ例ですが、ここでは最初に charset meta タグ要素：

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

どちらのアプローチでも、 meta エレメント。

結論

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

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

モバイルバージョンを終了