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

对于Angular来说是个新手，所以请耐心听我说（或者，如果这是显而易见的，请给我指出相应的文档文章）

基本上，我的网站（所有页面）的结构如下：

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

标题div

内容

页脚

我想要它，这样你点击的任何链接都会改变header div的内容；现在我将从更改背景色开始。例如，主页的标题为蓝色，关于为红色，资源为绿色，联系人为黄色

我开始做的是直接使用一个方法操纵样式，然后单击链接上的listener

我如何根据单击的链接将类附加到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() {
    // ???
  }
}

从'@angular/core'导入{Component}；
从'@angular/router'导入{RouterModule，Routes}；
@组成部分({
选择器：'应用程序根'，
模板：`

家
关于
资源
接触

这是文件的标题
`,
样式URL:['./app.component.scss']
})
导出类AppComponent{
showStyle=false；
getHeaderStyle（）{
// ???
}
}

您可以将activateRoute存储为一个成员变量，并根据该变量存储样式

export class AppComponent {
  activatedRoute = "";

然后，单击链接时，设置activatedRoute

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

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

如果您不仅想这样做，当有人单击其中一个链接时，而且总是在路由被激活时，那么您应该插入

Router

并检查url

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

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

---

请参见本文件中的运行示例，您可以将activateRoute存储为成员变量，并根据该变量存储样式

export class AppComponent {
  activatedRoute = "";

然后，单击链接时，设置activatedRoute

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

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

如果您不仅想这样做，当有人单击其中一个链接时，而且总是在路由被激活时，那么您应该插入

Router

并检查url

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

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

---

请参阅此

中的运行示例如果要在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>

---

等等。

如果您想在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>

---

等。

您应该在app.component.ts上使用“ActivatedRoute”。您应该在app.component.ts上使用“ActivatedRoute”。谢谢您的回复！我喜欢使用activatedRoute和ngClass的想法，但在改变类的时候我仍然有一些问题。我将click listener和ngClass添加到div中，但当我在Chrome中检查组件时，仍然会得到“ng reflect ng class=“[object]”。此外，我将如何注入ActivatedRoute？我添加了更多的代码片段和一个运行示例的plunker。ng反射ng类是一个内部属性。你可以忽略它。非常感谢你。那辆车确实很有道理。。。虽然当我尝试重新创建它时（就像你一样使用红色和蓝色文本），我一直收到typescript错误“无法读取未定义的'url'的属性”。可能是CLI的原因吗？检查你的构造函数：

constructor（public router:router）{}

感谢你的回复！我喜欢使用activatedRoute和ngClass的想法，但在改变类的时候我仍然有一些问题。我将click listener和ngClass添加到div中，但当我在Chrome中检查组件时，仍然会得到“ng reflect ng class=“[object]”。此外，我将如何注入ActivatedRoute？我添加了更多的代码片段和一个运行示例的plunker。ng反射ng类是一个内部属性。你可以忽略它。非常感谢你。那辆车确实很有道理。。。虽然当我尝试重新创建它时（就像你一样使用红色和蓝色文本），我一直收到typescript错误“无法读取未定义的'url'的属性”。这可能与CLI有关吗？检查你的构造函数：

constructor（public router:router）{}