معرفی
نحوه تنظیم عنوان صفحه پویا در برنامه am Angular را بر اساس تغییر مسیر یاد خواهیم گرفت. عنوان مختلف را برای مسیرهای مختلف تنظیم می کنیم.
پیش نیازها
دانش اولیه اجزای / ماژول ها و مسیرهای Angular. من نحوه تنظیم عنوان پویا صفحه را نشان خواهم داد. قبل از ادامه، باید دانش اولیه Angular را داشته باشید. من فرض می کنم که شما قبلا یک برنامه Angular ایجاد کرده اید. در اینجا، نحوه افزودن قابلیت عنوان پویا را در برنامه موجود خود نشان خواهم داد.
ما از TitleService برای پیاده سازی عملکرد عنوان پویا استفاده خواهیم کرد.
TitleService
این یک سرویس داخلی در بسته «@angular/platform-browser» است. این یک کلاس ساده است که یک API برای تنظیم و گرفتن عنوان صفحه HTML ارائه می دهد. این دو روش برای دریافت و تنظیم عنوان صفحه HTML ارائه می دهد.
- getTitle(): string: عنوان صفحه HTML فعلی را در قالب رشته ای برمی گرداند.
- setTitle( newTitleName: string) - عنوان صفحه فعلی HTML را تنظیم می کند.
مرحله 1
همانطور که در تصویر زیر نشان داده شده است، سه جزء به نام های HomeComponent، DashboardComponent و Dashboard2Component ایجاد کنید. ما از این اجزا برای تنظیم عناوین مختلف استفاده خواهیم کرد.
![عنوان صفحه پویا زاویه ای بر اساس مسیر](http://pezhvak24.ir/dl/codenevis/firstcode/article/angular-dynamic-page-title-based-on-route/Images/Untitled2.jpg)
مرحله 2 - خدمات عنوان را وارد کنید
فایل app.module.ts را باز کنید و همانطور که در زیر نشان داده شده است، عنوان را از ماژول @angular/platform-browser وارد کنید.
- import { BrowserModule , Title} from '@angular/platform-browser';
و مطابق شکل زیر سرویس را در فراداده ارائه دهنده ثبت کنید:
- providers: [Title]
مرحله 3
فایل app.routing.module.ts را باز کنید یا اگر وجود ندارد فایل جدید ایجاد کنید. مسیر و عنوان مربوطه را در این فایل اضافه می کنیم. مسیر را مطابق شکل زیر در فایل اضافه کنید.
- import { NgModule, Component } from '@angular/core';
- import { Routes, RouterModule } from '@angular/router';
- import { DashboardComponent } from './dashboard/dashboard.component';
- import { Dashboard2Component } from './dashboard2/dashboard2.component';
- import { HomeComponent } from './home/home.component';
- const routes: Routes = [
- {
- path : 'dash',
- component : DashboardComponent,
- data : {
- title: 'App Dashboard '
- }
- },
- {
- path : 'dashboard',
- component : Dashboard2Component,
- data : {
- title: 'Dashboard 2'
- }
- },
- {
- path : 'home',
- component : HomeComponent,
- data : {
- title: 'Home Page'
- }
- },
- {
- path : ",
- component : HomeComponent,
- data : {
- title: 'Home Page'
- }
- }
- ];
- @NgModule({
- imports: [RouterModule.forRoot(routes)],
- exports: [RouterModule]
- })
- export class AppRoutingModule { }