هنگامی که ما برنامه های Angular را می سازیم، کل DOM را که در مولفه اصلی برنامه ما قرار دارد کنترل می کنیم که خود آن هم در بدنه HTML است.
بنابراین این معماری به ما امکان دسترسی به عنوان صفحه HTML را نمی دهد زیرا عنوان در عنصر <head> که قبل از <body> هست قرار دارد.
چگونه می توان عنوان صفحه را تغییر داد؟
Angular یک سرویس خاص برای این کار دارد: Title .
در اینجا مثالی از نحوه استفاده از این سرویس آورده شده است:
import { Component } from '@angular/core';
import { Title } from '@angular/platform-browser';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
constructor(private titleService: Title) {
titleService.setTitle("A test title");
}
با این کار عنوان صفحه روی "A test title" تنظیم می شود. این عنوان را می توان هر چند وقت یک بار در صورت نیاز تغییر داد.
به کد زیر توجه کنید:
export class AppComponent {
constructor(private titleService: Title) {
this.setTitle("A test title");
}
public setTitle( newTitle: string) {
this.titleService.setTitle( newTitle );
}
}
و قالب HTML برای دکمه هایی که متد setTitle را فراخوانی می کنند :
<button (click)="setTitle('Hello World')">
Set title to 'Hello World'
</button>
<button (click)="setTitle('Anything you want')">
Set title to 'Anything you want'
</button>
در مورد تگ های متا چطور؟
سرویس دیگری به نام متا برای این منظور وجود دارد. سرویس متا کمی بیشتر درگیر است زیرا یک صفحه می تواند چندین متا تگ داشته باشد. در نتیجه، این سرویس دارای تمام روش‌های CRUD (ایجاد - به‌روزرسانی - حذف) را پوشش میدهد.
class Meta {
addTag(tag: MetaDefinition, forceCreation: boolean);
addTags(tags: MetaDefinition[], forceCreation:boolean);
getTag(attrSelector: string); getTags(attrSelector: string);
updateTag(tag: MetaDefinition, selector?: string);
removeTag(attrSelector: string);
removeTagElement(meta: HTMLMetaElement);
}
قطعه کد فوق کامپوننت به روز شده من است که اکنون یک متا تگ را در صفحه تنظیم می کند. نه اینکه من از متود updateTag به جای addTag استفاده می کنم بلکه به این دلیل که updateTag اگر تگ قبلاً وجود نداشته باشد، تگ را ایجاد می‌کند، در حالی که addTag صرف نظر از هر چیزی یک متا تگ جدید اضافه می‌کند.
import { Component } from '@angular/core';
import { Title, Meta } from '@angular/platform-browser';@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
constructor(private titleService: Title, private metaService: Meta ) {
this.setTitle("A test title");
this.metaService.updateTag(
{
name: 'description',
content: 'Changing meta tags using an Angular service'
}
);
}
public setTitle( newTitle: string) {
this.titleService.setTitle( newTitle );
}
}
امیدوارم مطلب فوق برایتان مفید بوده باشد
موفق باشید
