Angular 7应用嵌入外部HTML的正确性及根组件传参咨询

Great question! Let's tackle this from two angles: whether embedding your Angular app via <app-root> is valid, and how to pass input parameters to the root component.

Is embedding via <app-root> compliant? #

Absolutely! This approach is fully valid and supported by Angular. Here's why:
-本质上，你是把整个Angular应用作为独立的前端 bundle 挂载到外部页面的指定节点上。Angular's bootstrap process is designed to target a specific DOM element (in this case, <app-root>) and initialize the app there.

• Since you're running the full Angular runtime instead of relying on Web Components (like Angular Elements), you avoid the browser compatibility issues that come with custom elements. This is exactly why you're seeing consistent behavior across all browsers.
• As long as you correctly include all required Angular bundle files (runtime.js, polyfills.js, main.js, etc.) in the external HTML, and the page environment meets Angular 7's basic runtime requirements (like ES5 support if needed), this method is completely legitimate.

How to pass input parameters to the root component #

Since <app-root> isn't a native custom element by default, Angular won't automatically pick up attribute inputs like it does for regular components. But there are several straightforward workarounds:

1. Pass parameters via URL query strings #

Add your parameters to the external page's URL, then fetch them in your root component using Angular's ActivatedRoute:

External HTML example:

<!-- The external page URL could be something like: http://external-site.com?widgetId=456&theme=light -->
<app-root></app-root>
<script src="path/to/your/angular/runtime.js"></script>
<script src="path/to/your/angular/polyfills.js"></script>
<script src="path/to/your/angular/main.js"></script>

Root component code:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  widgetId: string | null = null;
  theme: string | null = null;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.route.queryParams.subscribe(params => {
      this.widgetId = params['widgetId'];
      this.theme = params['theme'];
      // Use these parameters in your component logic
    });
  }
}

2. Pass parameters via a global window variable #

Define a global configuration object in the external HTML before loading your Angular bundles, then access it in your root component:

External HTML example:

<script>
  // Define global config before Angular loads
  window.angularWidgetConfig = {
    widgetId: 456,
    theme: 'light',
    userPreferences: { showSidebar: true }
  };
</script>

<app-root></app-root>
<script src="path/to/your/angular/runtime.js"></script>
<script src="path/to/your/angular/polyfills.js"></script>
<script src="path/to/your/angular/main.js"></script>

Root component code:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  config: any = {};

  ngOnInit() {
    // Access the global variable (use `as any` to bypass TypeScript type checks)
    this.config = (window as any).angularWidgetConfig || {};
    // Use this.config.widgetId, this.config.theme, etc.
  }
}

3. Pass parameters via <app-root> attributes (manual approach) #

You can read attributes directly from the <app-root> element during Angular's bootstrap process, then inject them into your root component:

External HTML example:

<app-root widget-id="456" theme="light"></app-root>
<script src="path/to/your/angular/runtime.js"></script>
<script src="path/to/your/angular/polyfills.js"></script>
<script src="path/to/your/angular/main.js"></script>

Update main.ts to read attributes:

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

// Get the app-root element and its attributes
const appRoot = document.querySelector('app-root');
const widgetConfig = {
  widgetId: appRoot?.getAttribute('widget-id'),
  theme: appRoot?.getAttribute('theme')
};

// Inject the config as a provider so components can access it
platformBrowserDynamic([
  { provide: 'WIDGET_CONFIG', useValue: widgetConfig }
])
  .bootstrapModule(AppModule)
  .catch(err => console.error(err));

Root component code to inject the config:

import { Component, Inject, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  widgetId: string | null = null;
  theme: string | null = null;

  constructor(@Inject('WIDGET_CONFIG') private config: any) {}

  ngOnInit() {
    this.widgetId = this.config.widgetId;
    this.theme = this.config.theme;
  }
}

Each method has its pros:

• URL params are great for simple, shareable configurations.
• Global variables work well for complex objects.
• Attribute-based passing feels most natural for HTML-centric configurations.

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