Nhận và thiết lập thẻ meta HTML trong Angular
Dịch vụ Meta của Angular giúp bạn dễ dàng lấy hoặc đặt các thẻ meta khác nhau tùy thuộc vào lộ trình hoạt động hiện tại trong ứng dụng của bạn. Hãy xem qua việc sử dụng nó và các phương pháp có sẵn.
Dịch vụ Angular Meta có sẵn cho Angular 4 trở lên.
addTag & addTags
Sử dụng dịch vụ Meta dễ dàng như nhập nó từ @ angle / platform-browser và đưa nó vào một thành phần hoặc dịch vụ của bạn.
Dưới đây là một ví dụ trong đó ta thêm thẻ meta cho thẻ Twitter khi tải thành phần chính:
import { Component } from '@angular/core';
import { Meta } from '@angular/platform-browser';
Với nhiều thẻ meta như ví dụ trên, bạn có thể sử dụng phương thức addTags để đặt tất cả chúng trong cùng một lệnh gọi:
this.meta.addTags([
{ name: 'twitter:card', content: 'summary_large_image' },
{ name: 'twitter:site', content: '@alligatorio' },
// ...
]);
Lưu ý cả addTag và addTags đều có thể lấy đối số boolean thứ hai để cho biết liệu thẻ có nên được tạo ngay cả khi nó đã tồn tại hay không. Ví dụ ở đây, thẻ sẽ được thêm hai lần:
constructor(private meta: Meta) {
this.meta.addTags([
{ name: 'twitter:site', content: '@alligatorio' },
{ name: 'twitter:site', content: '@alligatorio' }
], true);
}
}
getTag & getTags
Tương tự như phương pháp addTag và addTags, cũng có những phương pháp getTag và getTags. Dưới đây là một ví dụ về cách getTag được dùng :
constructor(private meta: Meta) {
const viewport = this.meta.getTag('name=viewport');
console.log(viewport.content); // width=device-width, initial-scale=1
}
getTag nhận một chuỗi bộ chọn thuộc tính và trả về một HTMLMetaElement . getTags cũng có một bộ chọn thuộc tính, nhưng trả về một mảng có khả năng có nhiều HTMLMetaElements trùng với bộ chọn.
updateTag
Đưa ra định nghĩa thẻ meta mới và một bộ chọn, phương thức updateTag sẽ cập nhật bất kỳ thẻ nào phù hợp với bộ chọn. Trong ví dụ có phần phức tạp sau đây, đầu tiên ta đặt một thẻ meta có nội dung là Summary_large_image và sau đó cập nhật nó thành chỉ tóm tắt :
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'`
);
}
Trong một ứng dụng thực, thay vào đó, bạn có thể cần cập nhật các thẻ meta hiện diện trên phạm vi global trong ứng dụng, nhưng điều đó sẽ có các giá trị khác nhau tùy thuộc vào tuyến hoạt động.
removeTag & removeTagElement
Phương thức removeTag nhận một chuỗi cho bộ chọn thuộc tính và xóa thẻ. Không phải bạn muốn làm điều này, nhưng đây là cách bạn có thể xóa thẻ meta bộ ký tự:
constructor(private meta: Meta) {
this.meta.removeTag('charset');
}
Loại bỏTagElement cũng tương tự, nhưng thay vào đó lấy trực tiếp HTMLTagElement thay vì bộ chọn chuỗi. Đây là ví dụ tương tự, nhưng ở đây trước tiên ta lấy phần tử thẻ meta bộ ký tự:
constructor(private meta: Meta) {
const chartsetTag = this.meta.getTag('charset');
this.meta.removeTagElement(chartsetTag);
}
👾 Và đó là nó! Đến đây bạn biết cách thêm, xóa hoặc cập nhật động thẻ meta. Nếu bạn muốn tìm hiểu sâu hơn, hãy xem hướng dẫn của ta về cách cập nhật tiêu đề trang một cách khai báo bằng cách sử dụng ngrx.
Các tin liên quan
Hiển thị HTML thô trong ứng dụng Vue của bạn2017-06-26
Nén HTML của bạn trong Jekyll
2017-01-17
Sử dụng DOMParser để phân tích cú pháp các chuỗi HTML
2016-10-21
Tham chiếu thuộc tính mục tiêu cho thẻ neo trong HTML
2016-09-12
HTML AMP, Tổng quan
2016-06-29
Cách bảo vệ trang web WordPress của bạn khỏi Genericons Example.html Lỗ hổng XSS
2015-05-07
