Angularのメタサービスを使用して情報を取得、追加、更新、および削除する方法
序章
Angularのメタサービスを使用すると、異なる設定を取得または設定できます meta
アプリ内の現在アクティブなルートに応じてタグを付けます。
注:AngularMetaサービスはAngular4以降で利用できます。
その使用法と利用可能な方法を見ていきましょう。
前提条件
この記事をフォローしたい場合は、次のものが必要になります。
- HTMLメタ要素にある程度精通している。
- Angularサービスにある程度精通している。
このチュートリアルは、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);
}
コンテンツはコンソールに出力されます。
Outputwidth=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
.