angular2使用router.subscribe观看网址更改

我使用router.event.subscribe@angular/router观看url更改执行if声明，虽然event.subscribe工作正常。但我的问题是，如何避免重复我的if声明只是为了显示这些URL上的标题。这可能是router.subscribe以外的东西，但不确定要使用什么。angular2使用router.subscribe观看网址更改

基本上需要一个基于您所在网址的动态标题。

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，但它看起来不太友好。

来源

2016-07-27 nCore

编辑您可以使用骆驼案件。看到它用在答案的末尾部分

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或者你必须使用一些公式/模式

说你当前的网址是 http://stackoverflow.com/questions/38613960/angular2-using-router-subscribe-to-watch-url-change。你可以得到最好的来自该网址的标题也能像

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 


    });

来源

2016-07-27 13:45:21 Sami

我的头脑中也有这种方法，但通过这样做，我会拥有像title-1或dashboard-3之类的东西。子字符串或正则表达式这将是一个痛苦，因为网址有不同的字符数。希望将“Title 1”作为最终结果，我想这就是为什么我做了if语句。 – nCore

抱歉，无法让你清楚。它不会给你'标题1'，但它给'标题1'。订阅到手表的URL变化。请参阅我的编辑结尾处的答案 – Sami

谢谢，不，它不会给第1标题，但现在它会给我标题1.没有像（仪表板预览测试）那样的方式（仪表板预览测试）。那么除非我在route.ts中创建路径：'Dashboard-Preview-Test'，但是这会给我www.mysite.com/Dashboard-Preview-Test在url中。 – nCore

这里是我的方法的正常工作，特别是对嵌套的路线：

我使用递归辅助方法来抓住后最深的可用标题路线发生了变化：

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

这是假设，你有你的路由的数据属性中指定的网页标题，就像这样：

来源

2016-11-07 15:05:49

angular2使用router.subscribe观看网址更改

回答

相关问题