Css 角度6：如何动态更改页面背景颜色_Css_Angular_Background Color

Css 角度6：如何动态更改页面背景颜色

css angular

Css 角度6：如何动态更改页面背景颜色,css,angular,background-color,Css,Angular,Background Color,我在使用Bootstrap 4的Angular 6应用程序上工作，需要根据用户进入的页面更改页面背景颜色。默认为白色，但对于登录和注册屏幕，页面颜色需要为蓝色到目前为止，我发现：在ngAfterViewInit中使用 this.elementRef.nativeElement.ownerDocument：这种方法使应用程序更容易受到XSS攻击，我希望避免这种情况。在app.component.ts中将视图封装设置为无：这样我可以在app.component中设置身体颜色，即向前1步。

我在使用Bootstrap 4的Angular 6应用程序上工作，需要根据用户进入的页面更改页面背景颜色。默认为白色，但对于登录和注册屏幕，页面颜色需要为蓝色

到目前为止，我发现：

在ngAfterViewInit中使用 this.elementRef.nativeElement.ownerDocument：这种方法使应用程序更容易受到XSS攻击，我希望避免这种情况。在app.component.ts中将视图封装设置为无：这样我可以在app.component中设置身体颜色，即向前1步。因此，现在我的app.component.css中有：

body {
  background-color: blue;
}

问题: 如何使用变量更改app.component中的颜色值

使用[ngStyle]我无法达到车身背景色。也许使用css变量？但是如何动态地更改css变量的值呢？我是Sass新手，但这能提供一个解决方案吗？我的问题不同于关于这个主题的其他问题，因为我需要能够动态更改颜色值

为什么不根据不同的背景颜色定义一个单独的类呢？例如：

.blue {
  background: blue
}

.green {
  background: green
}

.grey {
  background: grey
}

然后使用ng类或ngClass在主体上设置这些类，无论您基于页面使用何种约定。这应该很容易实现。

为什么不根据不同的背景颜色定义一个单独的类呢？例如：

.blue {
  background: blue
}

.green {
  background: green
}

.grey {
  background: grey
}

然后使用ng类或ngClass在主体上设置这些类，无论您基于页面使用何种约定。这应该很容易实现。

使用render2并使用document对象将class设置为body

app.component.ts

注意：如果要切换类，只需在指定新类之前删除上一个类即可

使用render2并使用document对象将类设置为body

app.component.ts

注意：如果要切换类，只需在分配新类之前删除上一个类

我最喜欢的方法是根据路径将类添加到html标记中。例如，我们的基本布局组件中有一些代码，您可以将其放在根组件中，根组件在ngOnInit中执行此操作：

let wrapper = ''
const path = this.activatedRoute.snapshot.routeConfig.path
wrapper += this.tidyPath(path)
if (wrapper !== '') wrapper += '-'
const childPath = this.activatedRoute.snapshot.firstChild.routeConfig.path
wrapper += this.tidyPath(childPath)
this.routeWrapperCssClass = wrapper
$('html').addClass(this.routeWrapperCssClass)

这将向html标记中添加一个类，使其看起来像这样，尽管您可能需要调整此代码以适合您的应用程序：

<html class="registration">
    ....
</html>

您还可以根据添加到html标记的类隐藏元素，如下所示：

.navbar {
  display: block;
}

html.registration .navbar {
  display: none;
}

因为你知道自己一直在走什么路线，所以你可以通过CSS完全控制自己

PS您可能希望使用render2而不是jQuery来执行DOM操作-请参阅本文。。。我以前从未使用过它，但几乎与jQuery语法相同-多亏了Pratap A.K的回答

我最喜欢的方法是根据路径向html标记添加类。例如，我们的基本布局组件中有一些代码，您可以将其放在根组件中，根组件在ngOnInit中执行此操作：

let wrapper = ''
const path = this.activatedRoute.snapshot.routeConfig.path
wrapper += this.tidyPath(path)
if (wrapper !== '') wrapper += '-'
const childPath = this.activatedRoute.snapshot.firstChild.routeConfig.path
wrapper += this.tidyPath(childPath)
this.routeWrapperCssClass = wrapper
$('html').addClass(this.routeWrapperCssClass)

这将向html标记中添加一个类，使其看起来像这样，尽管您可能需要调整此代码以适合您的应用程序：

<html class="registration">
    ....
</html>

您还可以根据添加到html标记的类隐藏元素，如下所示：

.navbar {
  display: block;
}

html.registration .navbar {
  display: none;
}

因为你知道自己一直在走什么路线，所以你可以通过CSS完全控制自己

PS您可能希望使用render2而不是jQuery来执行DOM操作-请参阅本文。。。我以前从未使用过它，但几乎与jQuery语法相同-多亏了Pratap A.K的回答，我会根据路由来做。定义路由时，可以添加额外数据，例如类名

当路线改变时，即通过导航，活动路线的数据可用于设置车身标签上的等级

这就是你如何做到这一点更新styles.css以为body添加不同的类：更新路由以添加额外数据，并指定实体类名称。添加额外的数据属性，如bodyClass：编写代码以读取bodyClass，并在进行导航时将该类设置为body元素。这可以在app.component.ts中完成：

这里有一个关于StackBlitz的演示：

我会根据路线来做。定义路由时，可以添加额外数据，例如类名

当路线改变时，即通过导航，活动路线的数据可用于设置车身标签上的等级

下面是StackBlitz的一个演示：

你试过这个了吗？谢谢你的想法：但是ngClass和ngStyle有着同样的问题：我无法到达车身谢谢你的想法：但是ngClass和ngStyle有着同样的问题：我无法到达车身

凯德很好，工作很好。

@Component({
  selector: 'app-root',
  template: `
    <div>
      <router-outlet></router-outlet>
      <app-menu></app-menu>
    </div>
  `
})
export class AppComponent implements OnInit {
  constructor(
    @Inject(DOCUMENT) private document, 
    private renderer: Renderer2, 
    private router: Router, 
    private activatedRoute: ActivatedRoute) {
  }

  ngOnInit() {
    this.router.events
      .pipe(filter((event) => event instanceof NavigationEnd))
      .pipe(map(() => this.activatedRoute))
      .pipe(map((route) => {
        while (route.firstChild) {
          route = route.firstChild;
        }
        return route;
      }))
      .pipe(filter((route) => route.outlet === 'primary'))
      .pipe(mergeMap((route) => route.data))
      .subscribe((event) => this.updateBodyClass(event.bodyClass));
  }

  private updateBodyClass(customBodyClass?: string) {
    this.renderer.setAttribute(this.document?.body, 'class', '');
    if (customBodyClass) {
      this.renderer.addClass(this.document?.body, customBodyClass);
    }
  }
}