角度通用动态标题

时间:2018-02-15 21:45:27

标签: angular angular-universal

我有一个使用角度通用的网站。 为了改善我网站的搜索引擎优化,我希望使用API​​动态下载我的网页标题。

问题是我的请求AJAX在服务器渲染后工作。

以下是我的组件的代码:

this.seoService.getSeo(this.subdomain).subscribe(
        seo => {
            this.seo = seo;
            this.titleService.setTitle(this.seo.menu_title );
            this.metaService.addTag({name: 'description', content: this.seo.menu_description});
        }
    );

以下是我的服务代码:

getSeo (subdomain){
  return this.http.get('https://url/api/'+ subdomain + '/seo')
    .map((response: Response) => { 
        return response.json(); 
    });
}

1 个答案:

答案 0 :(得分:0)

我无法完全理解您的问题,但您可以使用isPlatformServer和isPlatformBrowser方法分别在服务器端或客户端执行特定任务。

在角度通用中,当您为api服务时,api会在服务器端呈现时被点击两次,甚至在客户端浏览器上也是如此,因为您可以使用TransferState方法来最小化服务器端的调用并在数据到达之前获取数据浏览器。

可以为您的代码解决问题。

1)在课前为你的标题创建一个masterStateKey,并在你的构造函数中创建一个私有的transfertate变量。

2)使用masterstatekey调用api,使其仅在服务器端命中,并使用isPlatformServer方法初始化您的标题变量。

示例: -

const RESULT_KEY = makeStateKey('result');

ngOnInit() {
     this.test = this.state.get(RESULT_KEY, null as any);

     if (!this.test) {
       this.http.get('http://127.0.0.1:8080/api/test')
       .subscribe( result => {
         this.test = result;
        this.state.set(RESULT_KEY, result);
      });
     }
     console.log(this.test);
}