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

Posted 2023-03-13

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

【英文标题】：How can I dynamically load a image in the body tag in each component?

【发布时间】：2019-09-26 07:27:36

【问题描述】：

我是 Angular 的新手，我试图创建这个示例来让我理解。我希望当我从一个组件导航到另一个组件时，我将背景图像动态加载到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

【问题讨论】：

我在回答中为您的用例添加了更好的解决方案。阅读本文。

【参考方案1】：

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

您应该在每个组件中添加encapsulation: ViewEncapsulation.None 到@Componentn()-definition，您希望在其中覆盖css 的body 标签。

这是一个工作示例：

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;
  `]
)

ma​​in.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 的工作示例。

在 Angular docs 上阅读有关 ViewEncapsulation 的更多信息。

【讨论】：

@yavg 阅读我的提示。如果需要从组件样式中覆盖body标签，那就只能这样了。在你的情况下，这不是最好的方法。最好的方法是，当您在组件标签/css-class 上的每个组件中设置背景图像时。

【参考方案2】：

如果我理解您的问题，您是否试图在初始化时将相同的背景图像加载到组件的模板中？ Angular 不依赖模板层次结构，因此应该在更高级别的模板中实现背景图像等常见元素。我会考虑在 app.component 模板中加载此图像。

【讨论】：

或者我该怎么办？我只想为路由器插座中加载的组件提供不同的背景图像

哦，我误会了。您可以像在任何 HTML 页面上一样设置任何组件的背景图像。将背景图像应用到单个组件的顶层 ，而不是正文。 标签将应用于整个应用程序，就像任何其他 HTML 网页一样。