Question

我在角4中制作了一款应用。其中一个功能允许用户使用颜色选择器选择主题的颜色。因此，当用户登录应用程序时，Web服务正在向我发送颜色代码，我必须根据它调整元素颜色（主要是按钮，菜单的背景颜色等）。

在我的登录组件中，我在应用程序数组中获得了十六进制代码，并将其存储在localStorage中：

this.loginService.login(this.email, this.password).subscribe(user => {
    this.loginService.getToken(this.email, this.password)
        .subscribe(resp => {
            localStorage.setItem('token', resp.accessToken);
            localStorage.setItem('login', user.username);
            localStorage.setItem('name', user.firstname + ' ' + user.lastname);
            localStorage.setItem('password', this.password);
            localStorage.setItem('user', JSON.stringify(user));
            localStorage.setItem('userId', user.id.toString());
            this.loginService.getApplications().subscribe(applications => {
                if (localStorage.getItem('applicationId') === '' || localStorage.getItem('applicationId') === null) {
                    localStorage.setItem('applicationId', applications.applications[0].id.toString());
                    localStorage.setItem('color', applications.applications[0].color);
                }
                localStorage.setItem('applications', JSON.stringify(applications));
                this.router.navigate(['/dashboard']);
            });
        });
});

例如，我想将我的“action”类覆盖到我的localStorage颜色项。

<a class="btn action float-right ml20" [routerLink]="['/client/create']">{{'ADD_CLIENT' | translate}}</a>

我有办法做到这一点吗？我可以在内联样式属性中更改它，但我不想为应用程序中的所有元素执行此操作。

谢谢！

Answer 1

我找到了解决方案。

在我的应用程序组件中，我添加了这个：

ngOnInit() {
    this.color = localStorage.getItem('color');
    const css = '.action {background-color: ' + this.color + ';}';
    const head = document.getElementsByTagName('head')[0];
    const style = document.createElement('style');
    style.type = 'text/css';
    style.appendChild(document.createTextNode(css));
    head.appendChild(style);
}

角度动态主题

1 个答案: