Question

我正在制作一个有角度的管理面板。当用户打开面板时，它将检查用户是否已通过身份验证。如果没有，它将被重定向到登录页面。

每个面板和登录组件具有不同的主体背景颜色。问题是，当angular将用户重定向到登录页面时，背景颜色不会改变。

我必须在各处使用# Copy the grains file if found if [ -f "$_TEMP_CONFIG_DIR/grains" ]; then echodebug "Moving provided grains file from $_TEMP_CONFIG_DIR/grains to $_SALT_ETC_DIR/grains"。我不应该改变这一点。但是以防万一我试图删除它，但仍然无法正常工作。我也尝试使用全局样式文件，但结果相同。

我有一些plan-b解决方案，但尝试在此处找到最佳实践。

代码不是必需的，但这是简化的代码：

encapsulation: ViewEncapsulation.None

。

// login.ts :
@Component({
    selector: 'app-login',
    templateUrl: './login.html',
    styleUrls: ['./login.scss'],
    encapsulation: ViewEncapsulation.None
})

和：

// login.scss :
body {
    background-color: #777;
}

。

// panel.ts :
@Component({
    selector: 'app-panel',
    templateUrl: './panel.html',
    styleUrls: ['./panel.scss'],
    encapsulation: ViewEncapsulation.None
})
export class PanelComponent implements OnInit {
    ngOnInit() {
        if (!this.auth.isLogin()) {
            this.router.navigate(['/login']);
        }
    }
}

Answer 1

您需要向body元素添加额外的类，并根据该类名称设置不同的颜色。您需要使用ngAfterViewInit和ngOnDestroy这样的生命周期挂钩：

// login.ts :
ngAfterViewInit() {
    document.querySelector('body').classList.add('login');
}

ngOnDestroy() {
    document.querySelector('body').classList.remove('login');
}

然后您对该组件的样式将是：

// login.scss :
body.login {
    background-color: #777;
}

当然还有面板组件：

// panel.ts :
ngAfterViewInit() {
    document.querySelector('body').classList.add('panel');
}

ngOnDestroy() {
    document.querySelector('body').classList.remove('panel');
}

和样式：

// panel.scss :
body.panel {
    background-color: #eee;
}

Answer 2

我有同样的问题。

为解决此问题，我向不同的组件添加了一个body标签：

redpage.component.ts

import os
import subprocess
import pandas as pd
import sys
from StringIO import StringIO
from io import StringIO
cmd = 'NSLOOKUP email.fullcontact.com'
df = pd.DataFrame()
a = subprocess.Popen(cmd, stdout=subprocess.PIPE)
b = StringIO(a.communicate()[0].decode('utf-8'))
df = pd.read_csv(b, sep=",")
column = list(df.columns)
name = list(df.iloc[1])[0].strip('Name:').strip()
name

greenpage.component.ts

<body>
    <h2> Red Page</h2>
</body>

并且我使用以下css：

redpage.component.css

<body>
    <h2> Green Page</h2>
</body>

greenpage.component.css

body{
    background: red !important;
    height:100vh;
}

希望这对您有帮助

Answer 3

问题是关于Angular 6的，但我将提供Angular 9的解决方案，以防其他人遇到类似问题。

我的操作方式取决于路线。定义路线时，可以添加其他数据，例如类名。

当路线更改（即用户从一条路线导航到另一条路线）时，活动路线中的数据可用于在body标签上设置类别。

这些是使这项工作有效的步骤

更新styles.css（或styles.scss）以为正文添加不同的类：

body {
  ...
}

body.red {
  background-color: #ff8181;
}

body.blue {
  background-color: #a0c3ee;
}

更新路线以添加其他数据，并指定主体类名称。添加一个额外的数据属性，例如bodyClass。对于您可以使用默认类的组件，则无需指定它：

const routes: Routes = [
  { path: '', component: DefaultComponent },
  { path: 'red', component: RedComponent, data: { bodyClass: 'red' } },
  { path: 'blue', component: BlueComponent, data: { bodyClass: 'blue' } }
];

编写代码以读取bodyClass并在路线之间进行导航时将类设置为body元素。这只需要在app.component.ts的一个地方完成，它将使用注入的ActivatedRoute来获取额外的数据：

@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);
    }
  }
}

这是StackBlitz上的一个演示：https://stackblitz.com/edit/angular-ivy-rs1tai

Angular 6中不同路线的不同车身背景颜色

3 个答案:

这些是使这项工作有效的步骤