Angular 对子routeroutlet 应用主机样式

更新

在判断了用户复制的Stackblitz后，下面的更改修复了问题！

• 由于两个router-outlet 都有相同的ng-component，我们遇到了这个问题，这显然看起来像是Angular 上的错误，因为如果每个元素来自不同的插座，那么它们应该有自己的封装！

• 要解决这个问题，我们需要直接在元素上使用host styling，以便即使属性匹配，直接应用样式也能确保 colored颜色 应用于正确的元素

-片断！-片断！

...
host: {
  ['style.backgroundColor']: '#f88',
},
...

插座1

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

@Component({
  templateUrl: './router-outlet1.component.html',
  styleUrls: ['./router-outlet1.component.less'],
  encapsulation: ViewEncapsulation.Emulated,
  changeDetection: ChangeDetectionStrategy.OnPush,
  host: {
    ['style.backgroundColor']: '#f88',
  },
  standalone: true,
})
export class RouterOutlet1Component implements OnInit {
  constructor() {}

  ngOnInit() {}
}

插座2

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

@Component({
  templateUrl: './router-outlet2.component.html',
  styleUrls: ['./router-outlet2.component.less'],
  encapsulation: ViewEncapsulation.Emulated,
  changeDetection: ChangeDetectionStrategy.OnPush,
  host: {
    ['style.backgroundColor']: '#88f',
  },
  standalone: true,
})
export class RouterOutlet2Component implements OnInit {
  constructor() {}

  ngOnInit() {}
}

Stackblitz Demo个

注意:此输出来自ng-component，这甚至不是一个正确的组件，您只需重定向URL以容纳指定的router-outlet ，组件将被呈现而不是ng-component！

它看起来像一个错误，但我不认为它可以复制到最新版本的Angular (17)

这是一个stackblitz，显示问题没有发生！

Stackblitz Demo个

要解决这个问题，您可以在组件修饰器上添加一个host class，这将确保类应用到正确的主机上！

插座2

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

@Component({
  selector: 'app-router-outlet2',
  encapsulation: ViewEncapsulation.Emulated,
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    I am Router 插座2
  `,
  styles: `
    :host.outlet2 {
      background-color: #88f;
    }
  `,
  host: {
    '[class.outlet2]': 'true',
  },
  standalone: true,
})
export class RouterOutlet2Component implements OnInit {
  constructor() {}

  ngOnInit() {}
}

插座1

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

@Component({
  selector: 'app-router-outlet1',
  template: `
    I am Router 插座1
  `,
  encapsulation: ViewEncapsulation.Emulated,
  changeDetection: ChangeDetectionStrategy.OnPush,
  styles: `
    :host.outlet1 {
      background-color: #f88;
    }
  `,
  host: {
    '[class.outlet1]': 'true',
  },
  standalone: true,
})
export class RouterOutlet1Component implements OnInit {
  constructor() {}

  ngOnInit() {}
}

Stackblitz Demo