Question

我使用router.event.subscribe @angular/router观看网址更改以执行if语句，但event.subscribe工作正常。但我的问题是如何避免重复我的if声明只是为了在这些网址上显示标题。它可能不是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但它看起来不太友好。

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

使用角度路径（仅当您不喜欢上述简单方式时）..现在相同的逻辑，但仅当.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 });

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

2 个答案: