根据Angular 4中的页面选择更改div的颜色答案

【问题标题】：Change color of div based on page selection in Angular 4根据Angular 4中的页面选择更改div的颜色
【发布时间】：2018-01-15 00:07:45
【问题描述】：

Angular 新手，所以请多多包涵（如果这很明显，请指点我相应的文档文章）

基本上，我网站的结构（所有页面）是这样的：

导航（主页、关于、资源、联系人）

header-div

内容

页脚

我想要它，以便您单击的任何链接都会更改 header-div 的内容；现在我将从更改背景颜色开始。比如首页的header是蓝色的，about是红色的，resources是绿色的，contact是黄色的。

我开始做但被卡住的是通过使用方法直接操纵样式并单击链接上的侦听器

如何根据点击的链接将类附加到 div？

这是我的 app.component.ts

import { Component } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

@Component({
  selector: 'app-root',
template: `
<div class="app-nav">
  <nav class="set-margin">
    <ul>
      <li><a routerLink="/" routerLinkActive="active" (click)="showStyle = !showStyle">Home</a></li>
      <li><a routerLink="/about" routerLinkActive="active">About</a></li>
      <li><a routerLink="/resources" routerLinkActive="active">Resources</a></li>
      <li><a routerLink="/contact" routerLinkActive="active">Contact</a></li>
    </ul>
  </nav>
</div>
<div [ngStyle]="getHeaderStyle()" class="app-mainheader">
  <div class="app-mainheader__content set-margin">
  this is the header for the
  </div>
</div>
<router-outlet></router-outlet>
 <app-footer></app-footer>
`,
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  showStyle = false;
  getHeaderStyle() {
    // ???
  }
}

【问题讨论】：

你应该在你的 app.component.ts 上使用“ActivatedRoute”。

标签： javascript css angular

【解决方案1】：

您可以将 activateRoute 存储为成员变量和样式。

export class AppComponent {
  activatedRoute = "";

然后，当你点击一个链接时，你设置了activatedRoute。

<a routerLink="/" routerLinkActive="active" (click)="activateRoute('home')>

activateRoute(activatedRoute: string) {
  this.activatedRoute = activatedRoute;
}

对于 div 的样式，您使用NgClass。

[ngClass]="{'home-class': activatedRoute === 'home', 'about-class': activatedRoute === 'about', ...}"

如果你不只是想这样做，当有人点击其中一个链接时，但总是在激活路由时，那么你应该注入Router并检查url。

[ngClass]="{'home-class': router.url === '/', 'about-class': router.url = 'about', ...}

// inject the router
constructor(public router: Router) {}

查看plunker中的一个运行示例

【讨论】：

感谢您的回复！我喜欢使用 activateRoute 和 ngClass 的想法，但我仍然在更改类时遇到问题。我将点击侦听器和 ngClass 添加到 div 中，但是当我在 Chrome 中检查组件时仍然收到“ng-reflect-ng-class=“[object Object]””...
另外，我该如何注入ActivatedRoute？
我添加了更多代码 sn-ps 和一个带有运行示例的 plunker。 ng-reflect-ng-class 是一个内部属性。你可以忽略它。
非常感谢。 plunker 确实很有意义......尽管当我尝试重新创建它时（就像你一样使用红色和蓝色文本），我不断收到打字稿错误“无法读取未定义的 'url' 的属性。”会不会是 CLI 的问题？
检查你的构造函数：constructor(public router: Router) {}

【解决方案2】：

如果您想将样式/条件代码保留在 a 函数中的模板之外，您可以测试路由值并根据当前路径返回一个类。这很容易阅读/维护，尽管它可能不是最优雅的解决方案：

import { Router } from '@angular/router';

constructor(
    private router: Router
) {
}

getHeaderStyle() {
    if (this.router.url.includes('/about/')
        return 'red';
    } else if (this.router.url.includes('/resources/')){
        return 'green';
    } else if (this.router.url.includes('/contact/')){
        return 'yellow';
    } else {
         return 'blue'
}

在你的组件用户[ngClass]中应用基于函数的类：

<div [ngClass]="getHeaderStyle()" class="app-mainheader">
  <div class="app-mainheader__content set-margin">
  this is the header for the
  </div>
</div>

然后为每种颜色创建样式：

.red {
    background-color: red;
}

等等

【讨论】：