Angular 2：当前路线标题

Question

我的app.component.html中包含以下代码：

<div id="main-container" class="container">
    <div class="container center-block" style="width: 300px">
        <div class="panel panel-primary">
            <div class="panel-heading text-center"><h4>*******</h4></div>

            <div class="panel-body">
                <router-outlet></router-outlet>
            </div>
        </div>
    </div>
</div>

我想在*******中显示当前路线名称。

在Angular 2中获得此功能的最佳方式是什么？

Answer 1

服务：

@Injectable()
export class TitleService {
  constructor(private _activatedRoute: ActivatedRoute) {
  }
  getPageTitle(replace: string) {
    return this._activatedRoute.url.replace('blah', replace);
  }
}

组件：

url: string;
constructor(private _titleService:TitleService) {
  this.title = _titleService.getPageTitle('ReplaceTXT');
}

然后在你的模板中

<h4>{{url}}</h4>