Angular 4：从组件构造函数动态引入.scss及数据库驱动自定义主题

Got it, let's break down how to implement both of your Angular requirements step by step—these are common scenarios when you need dynamic styling control, so here's what works well:

Angular 4 typically uses static styleUrls in the @Component decorator to load styles, but if you need to do this dynamically from the constructor, you can directly manipulate the DOM to inject a stylesheet link. Here's how:

First, inject the DOCUMENT token to safely access the DOM, then create a helper method to load your .scss file:

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

@Component({
  selector: 'app-dynamic-style',
  template: '<h1>Dynamic SCSS Loaded</h1>'
})
export class DynamicStyleComponent implements OnInit {
  constructor(@Inject(DOCUMENT) private document: Document) {}

  ngOnInit() {
    // Replace with your dynamic .scss path (you can fetch this from an API too)
    const targetScssUrl = './assets/styles/dynamic-component-styles.scss';
    this.loadScssFile(targetScssUrl);
  }

  private loadScssFile(url: string): void {
    const linkElement = this.document.createElement('link');
    linkElement.href = url;
    linkElement.rel = 'stylesheet';
    linkElement.type = 'text/css';
    
    // Append to the document head to load the stylesheet
    this.document.head.appendChild(linkElement);
  }
}

Important Notes:

• Make sure your .scss file is included in Angular CLI's build process (check angular.json under assets or styles if needed) so it gets compiled properly.
• This approach loads styles globally. If you need component-scoped dynamic styles, consider combining this with CSS variables and dynamic class binding instead.

There are two approaches here depending on whether you have predefined theme options or need fully custom color values from your database:

Option 1: Predefined Theme Classes (Matching Your Example) #

If you have a set of predefined theme combinations, define them in styles.scss first, then dynamically apply the corresponding class based on your database response:

// styles.scss
@use '@angular/material' as mat;

// Define theme classes for each possible combination
.light-red-pink {
  $custom-app-primary: mat.palette(mat.$mat-red);
  $custom-app-accent: mat.palette(mat.$mat-pink);
  $custom-app-theme: mat.light-theme($custom-app-primary, $custom-app-accent);
  @include angular-material-theme($custom-app-theme);
}

.light-lime-blue {
  $custom-app-primary: mat.palette(mat.$mat-lime);
  $custom-app-accent: mat.palette(mat.$mat-blue);
  $custom-app-theme: mat.light-theme($custom-app-primary, $custom-app-accent);
  @include angular-material-theme($custom-app-theme);
}

// Add more theme classes as needed (dark themes too!)
.dark-purple-amber {
  $custom-app-primary: mat.palette(mat.$mat-purple);
  $custom-app-accent: mat.palette(mat.$mat-amber);
  $custom-app-theme: mat.dark-theme($custom-app-primary, $custom-app-accent);
  @include angular-material-theme($custom-app-theme);
}

Then, in your root component, fetch the theme identifier from the database and apply the class to the body:

import { Component, Inject, OnInit } from '@angular/core';
import { DOCUMENT } from '@angular/common';
import { ThemeApiService } from './theme-api.service';

@Component({
  selector: 'app-root',
  template: '<router-outlet></router-outlet>'
})
export class AppComponent implements OnInit {
  constructor(
    @Inject(DOCUMENT) private document: Document,
    private themeApi: ThemeApiService
  ) {}

  ngOnInit() {
    this.themeApi.getUserTheme().subscribe(themeId => {
      // Remove any existing theme classes first
      const existingThemes = Array.from(this.document.body.classList)
        .filter(cls => cls.includes('-red-pink') || cls.includes('-lime-blue') || cls.includes('-purple-amber'));
      existingThemes.forEach(cls => this.document.body.classList.remove(cls));
      
      // Apply the new theme class from the database
      this.document.body.classList.add(themeId);
    });
  }
}

Option 2: Fully Custom Colors (Arbitrary Hex Values from Database) #

If you need to support any custom color combination, use CSS variables to make the Material theme dynamic. First, set up your styles.scss to use CSS variables:

// styles.scss
@use '@angular/material' as mat;

// Define CSS variables as color placeholders
:root {
  --primary-color: #3f51b5; /* Default primary color */
  --accent-color: #ff4081; /* Default accent color */
}

// Create a dynamic palette using CSS variables
$dynamic-primary: mat.define-palette(mat.$mat-palette, null, null, null, (
  default: var(--primary-color),
  lighter: lighten(var(--primary-color), 20%),
  darker: darken(var(--primary-color), 20%)
));

$dynamic-accent: mat.define-palette(mat.$mat-palette, null, null, null, (
  default: var(--accent-color),
  lighter: lighten(var(--accent-color), 20%),
  darker: darken(var(--accent-color), 20%)
));

// Define and apply the theme
$app-theme: mat.light-theme((
  color: (
    primary: $dynamic-primary,
    accent: $dynamic-accent
  )
));

@include mat.all-component-themes($app-theme);

Then, fetch the custom colors from your database and update the CSS variables dynamically:

import { Component, Inject, OnInit } from '@angular/core';
import { DOCUMENT } from '@angular/common';
import { ThemeApiService } from './theme-api.service';

@Component({
  selector: 'app-root',
  template: '<router-outlet></router-outlet>'
})
export class AppComponent implements OnInit {
  constructor(
    @Inject(DOCUMENT) private document: Document,
    private themeApi: ThemeApiService
  ) {}

  ngOnInit() {
    this.themeApi.getCustomTheme().subscribe(theme => {
      // theme = { primary: "#ff0000", accent: "#e91e63" }
      this.document.documentElement.style.setProperty('--primary-color', theme.primary);
      this.document.documentElement.style.setProperty('--accent-color', theme.accent);
    });
  }
}

This approach lets you use any hex color value from your database without predefining all possible theme combinations.

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