1

estou desenvolvendo um site em angular2, como ainda não tenho um conhecimento aprofundado estou com dificuldades no SEO, seguindo a documentação criei uma função simples

public constructor(private titleService: Title ) { }


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

Mas Quando coloco o html

<li><a routerLink="/produtos" (click)="setTitle( 'Produtos' )>Produtos</a></li>

a página fica em branco, teria alguma formar de iniciar a função ao mudar de rota?

2
  • 1
    Algum motivo específico pra mudar o título da página com uma função? Não dá pra, simplesmente, setar o <title> dentro do <head>? Commented 16/06/2017 às 17:04
  • A aplicação é front-end então para o SEO preciso mudar a tag <title> Commented 16/06/2017 às 17:21

2 Respostas 2

1

pessoal consegui resolver com o seguinte código

const routes: Routes = [{
  path: 'calendar',
  component: CalendarComponent,
  children: [
    { path: '', redirectTo: 'new', pathMatch: 'full' },
    { path: 'all', component: CalendarListComponent, data: { title: 'My Calendar' } },
    { path: 'new', component: CalendarEventComponent, data: { title: 'New Calendar Entry' } },
    { path: ':id', component: CalendarEventComponent, data: { title: 'Calendar Entry' } }
  ]
}];


import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/mergeMap';

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

@Component({...})
export class AppComponent implements OnInit {
  constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute,
    private titleService: Title
  ) {}
  ngOnInit() {
    this.router.events
      .filter(event => event instanceof NavigationEnd)
      .map(() => this.activatedRoute)
      .map(route => {
        while (route.firstChild) route = route.firstChild;
        return route;
      })
      .filter(route => route.outlet === 'primary')
      .mergeMap(route => route.data)
      .subscribe((event) => this.titleService.setTitle(event['title']));
  }
}

encontrei aqui mesmo no stackoverflow https://stackoverflow.com/questions/38644314/changing-the-page-title-using-the-angular-2-new-router

0

https://angular.io/api/platform-browser/Title

import {RouteConfig} from 'angular2/router';
import {Title} from 'angular2/platform/browser';

@RouteConfig([
    {path: '/home', component: HomeCmp, name: 'HomeCmp' }
])
class MyApp {
    constructor(router:Router, title:Title) {
      router.subscribe((url)=>{ //fires on every URL change
      title.setTitle(getTitleFor(url));
   });
 }
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .