如何在PHP/HTML环境中便捷渲染Angular Material组件？

Great question! Since you're stuck with an Apache/PHP environment (no Node.js server-side, no V8 rendering) and want to use Angular Material components like a regular HTML element with dynamic PHP-generated data, Angular Elements is exactly what you need. It lets you package Angular 2+ components as standard Web Components that work in any vanilla HTML/JS context—perfect for your use case.

Step 1: Build the Angular Material Select as a Web Component (Local Dev Only) #

You'll only need Node.js on your local machine to build the component; your production Apache server won't require it at all. Here's the breakdown:

1. Create a new Angular project (use standalone components for cleaner code, Angular 14+ recommended):

ng new material-select-element --standalone true
cd material-select-element

2. Add Angular Material and Angular Elements dependencies:

ng add @angular/material
ng add @angular/elements

3. Create a standalone reset select component matching your requirements:
   Create src/app/reset-select/reset-select.component.ts:

import { Component, Input } from '@angular/core';
import { MatSelectModule } from '@angular/material/select';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatOptionModule } from '@angular/material/core';

@Component({
  selector: 'material-reset-select',
  standalone: true,
  imports: [MatFormFieldModule, MatSelectModule, MatOptionModule],
  template: `
    <mat-form-field>
      <mat-select placeholder="State" [(value)]="selectedValue">
        <mat-option [value]="null">None</mat-option>
        <mat-option *ngFor="let state of states" [value]="state">{{state}}</mat-option>
      </mat-select>
    </mat-form-field>
  `,
  styles: [`
    mat-form-field { width: 100%; }
  `]
})
export class ResetSelectComponent {
  // Expose states as an input property to set via vanilla JS
  @Input() states: string[] = [];
  selectedValue: string | null = null;

  // Optional: Add a public reset method to trigger via JS
  reset() {
    this.selectedValue = null;
  }
}

4. Configure the app to build the component as a custom element:
   Update src/app/app.component.ts to register your component as a Web Component:

import { Component, OnInit } from '@angular/core';
import { createCustomElement } from '@angular/elements';
import { ResetSelectComponent } from './reset-select/reset-select.component';
import { Injector } from '@angular/core';

@Component({
  selector: 'app-root',
  template: '', // No root template needed since we're building a standalone element
})
export class AppComponent implements OnInit {
  constructor(private injector: Injector) {}

  ngOnInit() {
    const selectElement = createCustomElement(ResetSelectComponent, { injector: this.injector });
    customElements.define('material-reset-select', selectElement);
  }
}

5. Build the component into a single deployable JS bundle:
   Update angular.json to enable single-bundle output (add --single-bundle true to the build options):

"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
      "outputPath": "dist/material-select-element",
      "singleBundle": true,
      // Keep your existing options here
    }
  }
}

Run the production build:

ng build --prod

You’ll get a single JS file in dist/material-select-element (rename it to material-reset-select.js for simplicity).

Step 2: Use the Component in Your PHP Page #

Upload the material-reset-select.js file to your Apache server (e.g., in a js/ directory). Then use it in your PHP page just like a native HTML tag:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>PHP + Angular Material Select</title>
  <!-- Load Angular Material styles via CDN -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@angular/material/prebuilt-themes/indigo-pink.css">
</head>
<body>
  <!-- Use the custom element like any regular HTML tag -->
  <material-reset-select id="stateSelect"></material-reset-select>

  <!-- Load the bundled component JS -->
  <script src="/js/material-reset-select.js"></script>

  <script>
    // Get dynamic states from PHP (output as a JSON-encoded JS array)
    const states = <?php echo json_encode($dynamicStates); ?>;
    // $dynamicStates is your PHP-generated array of states

    // Wait for the custom element to be fully defined
    customElements.whenDefined('material-reset-select').then(() => {
      const selectElement = document.getElementById('stateSelect');
      // Set the states property directly (Angular Elements maps @Input() to element properties)
      selectElement.states = states;

      // Optional: Trigger reset via JS if needed
      // selectElement.reset();
    });
  </script>
</body>
</html>

Key Benefits for Your Use Case #

• No Node.js on Server: All build work happens locally—you only upload the final JS bundle to Apache.
• Native HTML Tag Experience: Use <material-reset-select> just like you would a <select> tag.
• Dynamic PHP Data Integration: Pass PHP-generated states directly to the component via vanilla JS, no server-side rendering required.
• Full Control: Customize the component’s behavior (like the reset functionality) to match your exact needs.

Why This Works #

Angular Elements wraps your Angular component in a standard Web Component (Custom Element), which is supported by all modern browsers. This means you don’t need a full Angular app running on the page—just load the bundle and use the tag. The @Input() properties become native element properties you can set via JS, making it seamless to integrate with dynamic PHP data.

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