时间戳

首页 > 解决方案 > 将 PHP 生成的 HTML 注入 Angular 7 应用程序组件

php - 将 PHP 生成的 HTML 注入 Angular 7 应用程序组件

问题描述

概述
我创建了一个单页 Angular 7 应用程序，用作网站的后端。我想为前端网站从 AngularJS 升级到 Angular 7，但我担心 SEO。归根结底，我喜欢 Angular 2+ 和 typescript 的组件结构，而不是 AngularJs。由于时间限制，我现在也想避免使用 Angular Universal。

问题
就像今天一样，前端网站在服务器端生成 HTML，AngularJS 应用程序使用 body 元素上的 ng-app 属性进行引导。这对 SEO 非常有用，因为所有 html 都已经提供/可用。尝试使用 Angular 2+ 时，html 必须是应用程序组件模板的一部分，我还没有弄清楚如何将应用程序组件绑定到从服务器生成的 html。我对使用客户端模板的子组件没问题，但我想在服务器端生成大部分网站，然后拥有一个很酷的组件库，我可以简单地将其注入服务器生成的 html .

我希望能够做的事情：

<!-- All the following HTML is generated on the server side (PHP)-->
<body>
  <app-root>
   <!-- how to tell the app component to use this html instead of whatever is compiled in Angular? -->
    <div id="App Root Component">
      <div>Some html</div>
      <component-a tag="does some cool stuff"></component-a><!-- Angular now behaves as normal here -->
      <div>Some other html</div>
      <component-b tag="does other cool stuff"></component-b><!-- Angular now behaves as normal here -->
    </div>
  </app-root>
</body>

这不起作用，因为 AppComponent 将使用自己的模板覆盖其中的所有内容。

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',/*The html in here will overwrite all contents within <app-root>, even if it's empty, or if this statement is omitted*/
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'app-www';
}

也许我正试图在这里将一个方形钉插入一个圆孔，但在我看来，在服务器端生成大部分静态 html，同时又能灵活地使用 Angular 2 的功能，这将是非常酷的+ 用于各种交互式组件。

标签： phpangular

解决方案

很好，你关心 SEO。Angular 2+ 是客户端脚本框架，它将在用户的浏览器上生成 HTML。当您看到源代码时，它不会显示呈现的 HTML。

谷歌已经开始爬取基于 JS 框架的网站。但有些不是最好的。

您从服务器端到服务器网站的解决方案可能是使用Angular Universal。这会将 HTML 服务到浏览器，而不是在用户的浏览器上呈现。

如果您对此不满意，可以购买https://prerender.io/，它将您的静态页面（由他们抓取）存储在他们的服务器上，并在机器人请求页面时为这些静态页面提供服务。

我希望这能回答你的问题。

推荐阅读