angular2 router.subscribeを使用してURLの変更を確認する

Question

私はrouter.event.subscribe@angular/routerを使用して、event.subscribeが正常に動作しますが、ifという文を実行するようにURLを変更しています。しかし、私の質問は、どうすれば私のifステートメントをこれらのURLにタイトルを表示するだけで繰り返すのを避けることができるのです。これはおそらくrouter.subscribe以外のものですが、これに何を使用するかはわかりません。

は、基本的に、あなたのURLに基​​づいて動的なタイトルを求めていました。

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

わかりません。私はroute.tsの経路を{ path: 'Title-1' }のように変更し、.replace()を実行して-を削除することができますが、これを実行するとwww.mysite.com/Title-1が得られますが、それほどフレンドリーではありません。

Answer 1

キャメルケースを使用できます。回答の最後に使用されていますか？

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

と証明（上記の簡単な方法が気に入らない場合のみ）。..同じロジックが、.path()がために正常に動作している場合にのみ、あなた

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

編集以上

はあなたにTitle 1を与えるだろう。そして、あなたが本当にダイナミックなタイトルを望むなら、あなたはコースからいくつかのパターンに従わなければなりません。 ifを使用するか、数式/パターンを使用する必要があります

あなたの現在のURLは http://stackoverflow.com/questions/38613960/angular2-using-router-subscribe-to-watch-url-changeと言っています。

私はAの後、最も深い可能なタイトルをつかむために、再帰的ヘルパーメソッドを使用します。あなたは

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

のような可能性がここに正常に動作します私のアプローチは、特にネストされたルートのため、だそのURLからタイトルのベストを引き出すことができますルートが変更されました：

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

これは、このように、あなたはあなたのルートのデータプロパティ内のページのタイトルが割り当てられていることを、想定している：

​​