如何在Angular的index.html页面中使用组件参数？

首先要明确：index.html里<app-root>标签内的内容是Angular启动完成前的加载占位，一旦Angular初始化完成，这部分内容会被AppComponent的模板完全替换。针对你的需求，分场景给出解决方案：

场景一：希望最终页面显示AppComponent的title（最推荐的规范方式） #

直接将目标内容移到AppComponent的模板中，这是最符合Angular组件化设计的做法：

1. 修改index.html，清空<app-root>内部的占位内容：

<body>
  <app-root></app-root>
</body>

2. 在AppComponent的模板文件（app.component.html）中添加内容：

<div> Application Title: {{title}} </div>

3. 在app.component.ts中定义title变量：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  title = '你的应用标题';
}

场景二：需要在Angular加载完成前显示动态占位内容 #

如果要在Angular初始化过程中，让占位内容显示AppComponent的title，可以通过全局对象结合原生JS实现：

1. 在app.component.ts中将title挂载到全局window对象：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  title = '你的应用标题';

  constructor() {
    // 挂载到全局对象
    (window as any).appTitle = this.title;
  }
}

2. 在index.html中用原生JS获取全局变量并替换占位：

<body>
  <app-root>
    <div> Application Title: <span id="title-placeholder">Loading...</span> </div>
  </app-root>
  <script>
    // 监听全局变量，Angular加载完成后替换占位文本
    function updateTitle() {
      const placeholder = document.getElementById('title-placeholder');
      if (window.appTitle) {
        placeholder.textContent = window.appTitle;
      } else {
        setTimeout(updateTitle, 100);
      }
    }
    updateTitle();
  </script>
</body>

场景三：title是静态配置项，需构建时注入index.html #

如果title是固定的配置值，不需要从AppComponent动态生成，可以通过环境变量结合构建替换实现：

1. 在src/environments/environment.ts中添加配置：

export const environment = {
  production: false,
  appTitle: '你的应用标题'
};

2. 借助自定义webpack配置，在构建时将index.html中的占位符替换为环境变量值（需安装@angular-builders/custom-webpack）：
   • 新建custom-webpack.config.js：

   const webpack = require('webpack');
   const environment = require('./src/environments/environment.ts').environment;
   
   module.exports = {
     plugins: [
       new webpack.DefinePlugin({
         'APP_TITLE': JSON.stringify(environment.appTitle)
       })
     ]
   };
   

   • 修改angular.json中的构建配置，使用自定义webpack：

   "architect": {
     "build": {
       "builder": "@angular-builders/custom-webpack:browser",
       "options": {
         "customWebpackConfig": {
           "path": "./custom-webpack.config.js"
         },
         // 其他原有配置...
       }
     }
   }
   

   • 在index.html中使用占位符：

   <body>
     <app-root>
       <div> Application Title: <%= APP_TITLE %> </div>
     </app-root>
   </body>
   

内容的提问来源于stack exchange，提问作者NickAth