Angular2 using router.subscribe to view URL changes

Question

I use router.event.subscribe @angular/routerto see the url change to execute the statement if, although it event.subscribeworks fine. But my question is, how can I avoid repeating my statement ifto show the title on these URLs. This is probably something else than router.subscribe, but not sure what to use for this.

basically, a dynamic name was required based on the URL you are on.

this._router.events.subscribe((event) => {
            console.log('route changed');
            if(this.location.path() == '/1'){
                this.title = 'Title 1';
            } else if(this.location.path() == '/2'){
                this.title = 'Title 2';
            }
        }); 

I do not know if that makes sense at all. I could change the route.ts paths to have something like { path: 'Title-1' }and just delete -by doing .replace(), but that will give me www.mysite.com/Title-1, but that doesn't look very friendly.

Answer 1

, , :

:

@Component({
  selector: 'app',
  template: `
    <h1>{{title}}</h1>
    <router-outlet></router-outlet>
  `
})
export class AppComponent implements OnInit {
  constructor(private router: Router) {}

  title: string;

  private getDeepestTitle(routeSnapshot: ActivatedRouteSnapshot) {
    var title = routeSnapshot.data ? routeSnapshot.data['title'] : '';
    if (routeSnapshot.firstChild) {
      title = this.getDeepestTitle(routeSnapshot.firstChild) || title;
    }
    return title;
  }

  ngOnInit() {
    this.router.events.subscribe((event) => {
      if (event instanceof NavigationEnd) {
        this.title = this.getDeepestTitle(this.router.routerState.snapshot.root);
      }
    });
  }
}

, , :

{
  path: 'example',
  component: ExampleComponent,
  data: {
    title: 'Some Page'
  }
}

Answer 2

. . , .

this.title = camelize(lastPartOfUrl.replace(/-/g,' '));

function camelize(str) {
  return str.replace(/(?:^\w|[A-Z]|\b\w|\s+)/g, function(match, index) {
    if (+match === 0) return ""; // or if (/\s+/.test(match)) for white spaces
    return index == 0 ? match.toLowerCase() : match.toUpperCase();
  });
}

- /.

javascript ( )

 this._router.events.subscribe((event) => {
        console.log('route changed');
        var url = window.location.toString();
        var ar = url.split('/');
        var lastPartOfUrl = ar[ar.length-1];
        this.title = "Title "+lastPartOfUrl ; 
    }); 

angular path ( ). , .path()

 this._router.events.subscribe((event) => {
        console.log('route changed');
        var lastPartOfUrl = this.location.path();
        this.title = "Title "+lastPartOfUrl ;            
    }); 

Edit

Title 1. , . if, /

, URL- http://stackoverflow.com/questions/38613960/angular2-using-router-subscribe-to-watch-url-change. URL-,

 this._router.events.subscribe((event) => {
        console.log('route changed');
        var lastPartOfUrl = this.location.path();
        //this.title = lastPartOfUrl.replace(/-/g,' '); //following will be the result
        //angular2 using router subscribe to watch url change 
        this.title = camelize(lastPartOfUrl.replace(/-/g,' '));
//Angular2 Using Router Subscribe To Watch Url Change 


    });