Question

我正在尝试覆盖路线上的文档标题。这是带有默认标题的路线。

{
  path: 'artikel/:id/:slug',
  component: ArticleComponent,
  data: {title: 'Article', routeType: RouteType.ARTICLE, 
  description: metaDescription},
  resolve: {error: ErrorResolverService, article: ArticleResolveService},
}

我正在使用ArticleResolverService从ID中获取文章，然后应用新的标题。

resolve(route: ActivatedRouteSnapshot): Observable<Article> {
    let id = route.paramMap.get('id');
    return this.as.getArticle(id).take(1).map(article => {
        if (article) {
            //this seems to set the title temporarely (flickering visible)
            this.ts.setTitle(article.title);
            return article;
        }
        return null;
    });
}

由于这种方法不太有效，因此我尝试在ArticleComponent中设置标题，这是路线的目标。（这发生在ngOnInit中）

this.route.data.subscribe((data:{article: Article}) => {
    this.article = data.article;

    //this seems to set the title temporarely (flickering visible)
    this.ts.setTitle(this.article.title);

    //using this in browser console works permanently
    window['setTitle'] = (t) => this.ts.setTitle(t);
});

无论我在做什么，每次加载页面时，都会看到想要的标题闪烁，但是立即将其重置为默认标题（如果我不使用默认标题，它将仅在标题栏，也就在想要的标题闪烁之后。）

如何有效设置此页面的永久标题？

Answer 1

您的问题的最后一步不是必需的（window['setTitle']）。使用下面的方法就可以了。默认标题将一直显示，直到调用setTitle函数为止，然后它将停留在新标题上。

导入标题服务

import { Title } from '@angular/platform-browser';

注入

constructor(
...
private titleService: Title,
) {...}

在ngOnInit中使用它

this.titleService.setTitle("Some custom title" + this.newInfoFromAPI);

标题不变角度4

1 个答案: