Question

Angular的新手，请耐心等待我（或者只是指出适当的文档文章，如果这很明显的话）

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

导航（家庭，关于，资源，联系）

头-DIV

含量

页脚

我想要它，以便你点击的任何链接都会改变header-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>

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

.red {
    background-color: red;
}

等

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

2 个答案: