تاریخ انتشار: چهارشنبه, ۵ بهمن ۱۴۰۱، ۰۴:۲۱ ب.ظ نویسنده: محمدیان

هنگامی که ما برنامه های 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);
}
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 );
   }
}