Angular 응용 프로그램에서 라우팅으로 페이지 제목을 변경하는 방법은 무엇입니까?

Angular 응용 프로그램에서 라우팅으로 페이지 제목을 변경하는 방법은 무엇입니까?

Angular 애플리케이션을 통해 라우팅할 때 페이지 제목을 변경할 수 있는 React-Helmet과 같은 npm 모듈/다른 방법이 있습니까?

PS: Angular 5를 사용합니다.

Angular 5에 타이틀 서비스가 있습니다.구성 요소의 생성자에 주입하고 다음을 사용합니다.setTitle()방법.

import {Title} from "@angular/platform-browser";

....

constructor(private titleService:Title) {
  this.titleService.setTitle("Some title");
}

Angular: https://angular.io/guide/set-document-title 의 문서입니다.

다음은 Angular 8에서 페이지 제목을 설정하는 테스트 방법이지만 Angular 5에서도 사용할 수 있습니다.일단 이것을 설정하면 경로 파일에 제목만 설정하면 모든 것이 자동으로 설정됩니다.

import { Component } from '@angular/core';
import { ActivatedRoute, Router, NavigationEnd } from '@angular/router';
import { Title } from '@angular/platform-browser';
import { filter, map } from "rxjs/operators";

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {

    constructor (private router: Router, private activatedRoute:    ActivatedRoute, private titleService: Title) {
        this.router.events.pipe(
            filter(event => event instanceof NavigationEnd),
            map(() => {
                let child = this.activatedRoute.firstChild;
                while (child) {
                    if (child.firstChild) {
                        child = child.firstChild;
                    } else if (child.snapshot.data &&    child.snapshot.data['title']) {
                        return child.snapshot.data['title'];
                    } else {
                        return null;
                    }
                }
                return null;
            })
        ).subscribe( (data: any) => {
            if (data) {
                this.titleService.setTitle(data + ' - Website Name');
            }
        });
    }

}

경로 파일에서 다음과 같은 작업을 수행할 수 있습니다.

const routes: Routes = [
    {
        path: 'dashboard',
        component: DefaultDashboardComponent,
        data: {
            title: 'Dashboard'
        }
    }
];

Angular v14에는 기본 라우터 출구를 기준으로 경로에서 제목을 수집하고 브라우저의 페이지 제목을 설정하는 전략 서비스가 내장되어 있습니다.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AboutComponent } from './about.component';
import { HomeComponent } from './home.component';

const routes: Routes = [
  {
    path: 'home',
    component: HomeComponent,
    title: "'My App - Home' // <-- Page title"
  },
  {
    path: 'about',
    component: AboutComponent,
    title: "'My App - About Me'  // <-- Page title"
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

여기 참조

다음은 경로가 없거나 구성 요소가 없는 중첩 경로의 경우 제목 복제를 수정하는 비재귀적 솔루션입니다.

Angular's를 추가해야 합니다.Title귀하의 애플리케이션에 대한 서비스: https://angular.io/guide/set-document-title .

그럼 당신의app.component.ts

import { Component, OnInit } from '@angular/core';
import { Title } from '@angular/platform-browser';
import { NavigationEnd, Router } from '@angular/router';
import { filter } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

  constructor(
    private readonly router: Router,
    private readonly titleService: Title
  ) { }

  ngOnInit() {
    this.router.events.pipe(
      filter((event) => event instanceof NavigationEnd)
    ).subscribe(() => {
      this.titleService.setTitle(this.getNestedRouteTitles().join(' | '));
    });
  }

  getNestedRouteTitles(): string[] {
    let currentRoute = this.router.routerState.root.firstChild;
    const titles: string[] = [];

    while (currentRoute) {
      if (currentRoute.snapshot.routeConfig.data?.title) {
        titles.push(currentRoute.snapshot.routeConfig.data.title);
      }

      currentRoute = currentRoute.firstChild;
    }

    return titles;
  }

  getLastRouteTitle(): string {
    let currentRoute = this.router.routerState.root.firstChild;

    while (currentRoute.firstChild) {
      currentRoute = currentRoute.firstChild;
    }

    return currentRoute.snapshot.data?.title;
  }
}

특정 항목에 액세스routeConfig.data상속된 데이터의 반복을 방지합니다.title기여하다.

그리고main-routing.module.ts또는 다른 라우팅 파일:

const routes: Routes = [
  {
    path: '',
    component: MainComponent,
    data: { title: 'MyApplication' },
    children: [
      {
        path: '',
        canActivateChild: [AuthGuard],
        children: [
          {
            path: 'dashboard',
            loadChildren: () => import('../dashboard/dashboard.module').then(m => m.DashboardModule),
            data: { title: 'Dashboard' }
          },
          {
            path: 'settings',
            loadChildren: () => import('../settings/settings.module').then(m => m.SettingsModule),
            data: { title: 'Settings' }
          }
        ]
      }
    ]
  }
];

다가오는 릴리스에서 변경된 "@angular/platform-browser"에서 {Title}을(를) 가져오더라도 모든 곳에서 변경되지 않도록 래퍼 클래스를 추가하고 싶습니다. :) ...아마도 "AppTitleService"라는 것이 있을 것입니다.

import { Injectable } from '@angular/core';
import { Title } from '@angular/platform-browser';

@Injectable({ providedIn: 'root' })
export class AppTitleService {

    constructor(private titleService: Title) { }

    getTitle() {
        this.titleService.getTitle();
    }
    setTitle(newTitle: string) {
        this.titleService.setTitle(newTitle);
    }
}

// Component.ts

    
    import { Component, OnInit } from '@angular/core';
    import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';
    import { filter } from 'rxjs/operators';
    
    @Component({
      selector: 'app-component',
      templateUrl: './component.html',
      styleUrls: ['./component.css']
    })
    export class Component implements OnInit {
    
      constructor(private router: Router, private route: ActivatedRoute) { }
    
      path: string[] = [];
      pathTitle: string;
    
      ngOnInit() {
        this.router.events.pipe(
          filter(event => event instanceof NavigationEnd)
        ).subscribe((event: NavigationEnd) => {
            this.path = event.url.substring(1).split('/');  //  URL => stackOverflow
            this.pathTitle = this.route.root.firstChild.snapshot.data.title; // data.title => stack Overflow
        });
      }
    
    // app-routing.module.ts
    const routes: Routes = [
      { 
        path: 'stackOverflow', 
        component: Component, 
        data: {title: 'stack Overflow'}
       }
    ];

오늘은 2022-10-14입니다.Angular 자체 문서를 포함한 위의 답변은 매우 좋지만, 가장 쉬운/가볍지는 않으며 때로는 지루하기도 합니다.

수백 개의 구성 요소/페이지, Angular 12+,title그리고.<meta name="description" ...>일반적으로 정적이므로 패키지를 추가하지 않고 하드 코드를 사용하는 것이 가장 좋습니다.

<head>
  <title...>
  <meta ...>
  ...
</head>

Chrome과 Edge는 다음을 포함합니다.META SEO inspector모두를 보여주다title그리고.metaindex.dll 및 구성 요소에서 브라우저는 첫 번째만 표시합니다. title발견된 순서대로

솔루션:

1. 이동<title>그리고.<meta>지수의. 아래쪽으로.
2. 자체 구성요소/페이지를 가질 경우 기본적으로 인덱스의

이유:

• <head>2014년에 출시된 HTML5에서는 더 이상 필수 사항이 아닙니다.
• <title>그리고.<meta>어디에나 배치 가능
• 중복된 동일한 이름에 대해서도 여러 개의 항목을 가질 수 있습니다.
• <title> 검색은 페이지의 되므로 구성 요소/페이지가 표시됩니다.
• <meta>모두 사용됩니다.
• 자세한 내용은 이 SO를 참조하십시오.

Wa-La의 index.html 내부에서 한 번의 간단한 조정으로 모든 페이지에 해당 제목이 표시됩니다.새로운 구성 요소/패키지를 도입하고 수백 개의 파일과 SEO 100을 업데이트할 필요가 없습니다!

참고로, 이것은 Angular에만 해당되는 것이 아닙니다. 를 포함한 다른 모든 제품에 적용됩니다.NET, Vue 및 React.

언급URL : https://stackoverflow.com/questions/47900447/how-to-change-page-title-with-routing-in-angular-application