angular2 mit router.subscribe zu sehen URL Änderung

Question

Ich benutze @angular/router zu sehen, die URL ändern, um eine if Anweisung auszuführen, obwohl event.subscribe funktioniert gut. Aber meine Frage ist, wie kann ich vermeiden, meine if Aussage zu wiederholen, nur um den Titel auf diesen URLs zu zeigen. Es ist wahrscheinlich etwas anderes als router.subscribe, aber nicht sicher, was dafür zu verwenden ist.

wollte grundsätzlich einen dynamischen Titel basierend auf der URL, auf der Sie sich befinden.

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

Ich weiß nicht, ob das Sinn macht überhaupt. Ich könnte meine route.ts Pfade ändern, um etwas wie { path: 'Title-1' } zu haben und entferne einfach die -, indem ich .replace() tue, aber dieses tuend gibt mir www.mysite.com/Title-1, aber es sieht nicht sehr freundlich aus.

Answer 1

Bearbeiten Sie können Camel Case verwenden. Sehen Sie es am Ende der Antwort verwendet

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

Antwort ist die Verwendung einiger Logik/Trick.

Proof mit einfachen Javascript (ein Muss Arbeitslösung)

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

Mit Winkelweg (nur, wenn Sie die obigen einfachen Art und Weise nicht mögen) .. Jetzt gleicher Logik, sondern nur dann, wenn .path() richtig funktionieren für

Sie

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

bearbeiten

Oberhalb finden Sie Title 1 geben. Und wenn Sie wirklich dynamische Titel wollen, müssen Sie natürlich ein Muster folgen. Entweder müssen Sie if verwenden oder Sie müssen einige Formel/Muster verwenden

Sagen Sie Ihre aktuelle URL ist http://stackoverflow.com/questions/38613960/angular2-using-router-subscribe-to-watch-url-change. Sie können das Beste aus Titeln von dieser URL bekommen könnte wie

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 


    }); 

Answer 2

mein Ansatz Hier sind die, vor allem für verschachtelte Strecken gut funktioniert:

ich eine rekursive Hilfsmethode verwenden, um die tiefstenen verfügbaren Titel nach einem packen Route hat sich geändert:

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

Dies wird unter der Annahme, dass Sie Seitentitel innerhalb der Daten Eigentum Ihrer Routen zugewiesen haben, wie folgt aus:

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