根据Angular 4中的页面选择更改div的颜色 [英] Change color of div based on page selection in Angular 4

问题描述

是Angular的新手，所以请忍受我(或者，如果这很明显的话，请把我指向适当的文档文章)

new to Angular so please bear with me (or just point me to the appropriate docs article if this is just that obvious)

基本上，我的网站(针对所有页面)的结构是这样的:

Basically, the structure of my site (for all of the pages) is this:

导航(家庭，关于，资源，联系人)

navigation (home, about, resources, contact)

header-div

header-div

内容

页脚

我想要它，以便您单击的任何链接都会更改header-div的内容；现在，我将从更改背景色开始.例如，首页的标题是蓝色，大约是红色，资源是绿色，联系人是黄色.

I want it so that any of the links you click will change the contents of the header-div; for now I'll start with changing the background color. For example, the home page's header is blue, about is red, resources is green, contact is yellow.

我开始做但被束之高阁的是直接使用一种方法来操纵样式，然后单击链接上的侦听器

What I started doing but got stuck with was directly manipulating the style by using a method and click listener on the links

如何根据点击的链接将一个类附加到div?

How would I got about attaching a class to the div, based on the link that's been clicked?

这是我的app.component.ts

This is my 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() {
    // ???
  }
}

推荐答案

您可以根据需要将activateRoute存储为成员变量和样式.

You could store the activateRoute as a member variable and style according to that.

export class AppComponent {
  activatedRoute = "";

然后，当您单击链接时，就设置了ActivatedRoute.

Then, when you click on a link, you set the activatedRoute.

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

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

对于div的样式，请使用 NgClass .

For the styling of the div, you use NgClass.

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

如果您不仅想这样做，那么当有人单击链接之一但总是在激活路由时，则应该注入 Router 并检查网址.

If you do not only want to do it, when someone clicks one of the links but always when the route is activated, then you should inject Router and check for the url.

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

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

在此 plunker

这篇关于根据Angular 4中的页面选择更改div的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！