从Angular 2中的按钮单击更改导航类答案

【问题标题】：Change Nav Class on Click from Button in Angular 2从Angular 2中的按钮单击更改导航类
【发布时间】：2017-12-02 14:23:25
【问题描述】：

我的 Angular 2 应用程序中有一个主导航组件，一旦单击导航中的项目，选定的 css 类就会应用于选定的导航项目。让我感到困惑的是在我的应用程序中的一个页面上，我有一个按钮，一旦点击就会将用户路由到另一个页面，我希望主导航相应地改变。

这是我的代码的一些 sn-ps：

nav.component

export class NavComponent {
    links: {};
    selectedClass: string;

    ngOnInit() {
        this.links = [
        {
            title: "Home",
            route: "/app/home",
            hidden: false
        },
        {
            title: "Add",
            route: "/app/add",
            hidden: false
        }];
    }

    selectedLink(link: String) {
        this.selectedClass = link;
    }

nav.html

<ng-container *ngFor="let link of links">
    <li *ngIf="!link.hidden" [routerLink]="link.route" [class.selected]="link == selectedClass" (click)="selectedLink(link)" [title]="link.name">
        <span>{{link.name}}</span>
    </li>
</ng-container>

nav.scss

li {
  align-items: center;
  background-color: blue;
  color: blue;
  display: flex;
  flex-direction: column;
  list-style: none;
  position: relative;
  text-align: center;
}

.selected {
    background-color: white;
    color: blue;
}

我想触发“selectedClass”函数，使选定的导航项通过单击另一个组件中的按钮更改 CSS 类。

非常感谢任何帮助。谢谢！

【问题讨论】：

看看redux。您可以在中心位置存储/修改类名，并从应用程序的任何位置进行访问。

标签： angular dependency-injection angular-components

【解决方案1】：

正如 garethb 所说，您可以使用 ngrx 拥有一个存储应用程序状态的单一存储。但为了简单起见，这里还有其他几种方法：

您可以在您的NavComponent 中使用@Input() selectedClass: string; 并通过其他组件传递选定的类

<nav-component selectedClass="class-name"></nav-component>

或者，可能更简单，将选定的类存储在应用程序范围的服务中，例如导入到您的app.module.ts 中的服务，这样您就知道它将是一个单例。

所以，在您的something.service.ts 中，您将拥有

selectedClass: string;

然后从您的组件中相应地设置它

constructor(public somethingService: SomethingService) {
   this.somethingService.selectedClass = 'first-class'
}

你最终会从模板中调用它

somethingService.selectedClass

【讨论】：