基于对角4页选择DIV的改变颜色(Change color of div based on page

新角所以请原谅（或只是点我到适当的文档文章，如果这仅仅是显而易见的）

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

导航（家园，大约，资源，联系）

头-DIV

内容

页脚

我想它使任何你点击将改变首-div的内容的链接; 现在我会改变背景颜色开始。例如，首页的标题是蓝色的，大约是红色的，资源是绿色的，接触是黄色的。

我开始做，但卡住了通过使用一种方法，点击收听的链接是直接操作风格

我将如何得到关于一类附加到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() {
    // ???
  }
}

Answer 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并检查网址。

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

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

看到这个正在运行的例子plunker

Answer 2:

如果你想保持风格/有条件码出模板的一个功能，您可以测试路线值，并返回基于当前路径上的类。这是很容易读/维持，虽然它可能不是最优雅的解决方案：

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>

然后创建你的每一种颜色款式：