Change page title with angle2

Question

Change page title with angle2

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

I am developing a site in angular2, as I do not yet have an in-depth knowledge I am having difficulties in SEO, following the documentation I created a simple function

public constructor(private titleService: Title ) { }


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

But when I put the html

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

The page is blank, would you have any way to start the function when changing the route?

angularjs angular-routes

asked by anonymous 16.06.2017 / 19:02

2 answers

MahApps - Change icons to a desired PNG format I can not do a function that returns a Semester of a Date in PostgreSQL

score 1 · Answer 1

Personal I was able to resolve with the following code

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']));
  }
}

I found it right here on stackoverflow link

score 0 · Answer 2

link

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));
   });
 }
}