Question

我是新手，我试图创建此示例以使我理解。我想当我从一个组件导航到另一个组件时，我将背景图像动态加载到body标签中，但我不知道为什么它不加载。如果您能帮助我，我非常感谢。

在styles部分中包含的每个组件中，我要为每个组件的主体更改的图像。

或者我该怎么办？我只想为路由器出口（在我的情况下为mainComponent和anotherComponent）中加载的组件提供不同的背景图像

这是我的代码：

  @Component({
    selector: 'another',
    template: '<a routerLink="/">main</a>',
    styles: [`body {
     position: fixed;
     min-width: 100%;
     background-image: url("https://source.unsplash.com/1920x1080?landscape") !important;
     background-repeat: no-repeat;
     background-size: 100%;
     background-position: center;
     background-size: cover;
    }`]

第二部分：

@Component({
  selector: 'main',
  template: '<a routerLink="/another">anotherComponent</a>',
  styles: [`body {
      position: fixed;
      min-width: 100%;
      background-image: url("https://source.unsplash.com/1920x1080?stars") !important;
      background-repeat: no-repeat;
      background-size: 100%;
    background-position: center;
      background-size: cover;
}`]

这是实时代码：

https://stackblitz.com/edit/angular-9kbx4q

Answer 1

在Angular中，您无法从组件样式中覆盖父样式，因为组件的样式已封装并且仅适用于组件。

您应该在每个组件的encapsulation: ViewEncapsulation.None定义中添加@Componentn({})到您想要覆盖body标签的CSS中。

这是一个有效的示例：

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

@Component({
    selector: 'another',
    template: '<a routerLink="/">main</a>',
    styles: [`body {
    position: fixed;
    min-width: 100%;
    background-image: url("https://source.unsplash.com/1920x1080?landscape") !important;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    background-size: cover;
    }`],
    encapsulation: ViewEncapsulation.None
})
export class AnotherComponent  {
  constructor(){}
}

重要：通过禁用封装，您的组件样式将被全局采用，并将覆盖具有相同类，id或标签的样式。

提示：您可以使用此解决方案，但最好将背景图像设置为组件自己的html标签。

针对您的用例的更好解决方案：

将包装器div添加到another和main组件模板中。然后将样式添加到该包装器div中。像这样：

another.component.ts

@Component({
  selector: 'another',
  template: '<div><a routerLink="/">main</a></div>',
  styles: [`div {
    position: fixed;
    min-width: 100%;
    background-image: url("https://source.unsplash.com/1920x1080?landscape") !important;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    background-size: cover;
  }`]
})

main.component.ts

@Component({
  selector: 'main',
  template: '<div><a routerLink="/another">anotherComponent</a></div>',
  styles: [`div {
    position: fixed;
    min-width: 100%;
    background-image: url("https://source.unsplash.com/1920x1080?stars") !important;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    background-size: cover;
  }`]
})

这是stackblitz上的有效示例。

详细了解docs上的ViewEncapsulation。

Answer 2

如果我理解您的问题，您是否正在尝试在初始化时将相同的背景图像加载到组件的模板中？ Angular的工作原理与模板层次结构不同，因此应在更高级别的模板中实现常见元素，例如背景图像。我将看看在app.component模板中加载此图像。

如何在每个组件的body标签中动态加载图像？

2 个答案: