Question

这是我的html：

<app-navbar></app-navbar>
<router-outlet></router-outlet>

我想将图像设置为分为2个组件（navbarComponent和homeComponent -selector）的主视图的背景，但是不会在其他组件（例如contactComponent-假定使用其他图像）中添加该图像。选择器应用导航栏和应用联系人）。

那么我如何将图像用作由app-navbar和app-home组成的视图的背景？

Answer 1

为什么不为您的<body>标签添加背景图片作为CSS类，您可以在全局styles.css文件中然后在页面/路由下定义该标签，以便显示，请使用这两个选项之一将该类名称添加到<body>标记中。

第一个选项是最简单但不建议使用的：

constructor(@Inject(DOCUMENT) private document: Document) {}

ngOnInit(){
   this.document.body.classList.add('test');
}

第二个选项（我个人的建议）是从@angular/core包中实现自定义呈现类：

import { Component, OnDestroy, Renderer2 } from '@angular/core';

export class myCoolComponent implements OnDestroy {

  constructor(private renderer: Renderer2) {
    this.renderer.addClass(document.body, 'test');
   }

  ngOnDestroy() {
    this.renderer.removeClass(document.body, 'test');
  }

希望这对您有帮助！

由2个或更多组件组成的View的Angular 7图像背景？

1 个答案: