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

Question

我是 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

Answer 1

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

Answer 2

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

您应该将 encapsulation: ViewEncapsulation.None 添加到每个组件中的 @Componentn({})-定义中，您希望在其中覆盖正文标记的 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 上的工作示例。

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

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

How can I dynamically load a image in the body tag in each component?

angular-template

angular-components

angular