假设我从一个PHP应用程序开始。在网站上的一个页面上，有一个复杂的交互式应用程序，我想使用Angular。问题是，我仍然希望该页面的页眉和页脚与网站的其他部分相匹配。我希望能够做这样的事情：
// main-template.php
<html>
<head>
<title>My Site-wide Header</title>
<script src="site-wide-script.js"></script>
<link href="site-wide-styles.css" rel="stylesheet">
<?php if ($somevar == true) : ?>
<?php echo "Yes, it has to be PHP"; ?>
<?php endif; ?>
</head>
<body>
<header>
<ul>
<li><a href="/home">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</header>
<!-- Drop entire Angular application here -->
</body>
</html>
对我来说，只在那里用PHPinclude处理Angular HTML文件是可行的，但这很糟糕，因为Angularindex.html文件当然已经包含了html、body等标签。当然，我可以DOM解析Angular文件，并在包含之前修复所有这些。。。但我更喜欢更好的解决方案。
在我的搜索中，我似乎找不到任何官方推荐的方法。事实上，我似乎根本找不到任何人这样做的例子——我所有的搜索都只发现有人在AngularJS上做类似的事情，而不是Angular。Angular有什么像样的方法可以做到这一点吗？
你应该能够做你想做的事。
这是我作为硬件项目所做的一个基于网络的聊天程序的index.html的内容(后端更有趣…(
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>crap chat</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="bootstrap.min.css" rel="stylesheet" />
</head>
<body class="m-a-1">
<?php print("Hello World ".date("r",time())."<br />n"); ?>
<app></app>
<script type="text/javascript" src="inline.bundle.js"></script>
<script type="text/javascript" src="polyfills.bundle.js"></script>
<script type="text/javascript" src="styles.bundle.js"></script>
<script type="text/javascript" src="vendor.bundle.js"></script>
<script type="text/javascript" src="main.bundle.js"></script>
</body>
</html>
只要你保留相同的js文件引用、样式表、样式(在<body>标签上(等，那么你就可以把它放进去，然后把<app></app>标签集扔到你想要的地方。
只是为了好玩，我在服务器上将文件重命名为index.php，添加了一个打印语句来打印页面加载的日期/时间，没有问题。
从angular6开始，这应该可以使用角度元素。
那么你的代码就是
// main-template.php
<html>
<head>
<title>My Site-wide Header</title>
<script src="site-wide-script.js"></script>
<link href="site-wide-styles" rel="stylesheet">
<?php if ($somevar == true) : ?>
echo "Yes, it has to be PHP";
<?php endif; ?>
</head>
<body>
<header>
<ul>
<li><a href="/home">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</header>
<your-component-name></your-component-name>
</body>
有关如何创建角度元素的指南，请访问https://angular.io/guide/elements-原则上，这并不比创建一个组件更难
由于有人可能仍然会遇到这个问题(比如我(，我想分享我的解决方案：
由于我们目前正在从纯PHP页面转变为Angular方法，我们需要在Angular构建过程的索引文件的头部包含一些基本的PHP内容。因此，我添加了一个postbuild-Step，它将在构建步骤之后自动运行。
然而，这一步是运行node.js脚本，它只需在distFolder的index.php中添加我们需要的php include
const fs = require('fs');
const path = require('path');
const sourceDir = path.join('dist', 'path');
const phpTag = "<?php include_once './some.php' ?>n";
const file = path.join(sourceDir, 'index.php');
fs.readFile(file, 'utf8', function (err, content) {
if (err) throw err;
if (!content.startsWith(phpTag)) {
content = phpTag + content;
fs.writeFile(file, content, 'utf8', function (err) {
if (err) throw err;
});
}
});
这些是我的package.json:的条目
"scripts": {
"build": "ng build",
"postbuild": "node ./addPHPTag.ts",