Question

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

以下是我的代码的一些片段：

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类。

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

Answer 1

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

您可以在@Input() selectedClass: string;中使用NavComponent并使用

从其他组件传递所选的类

<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

在Angular 2

1 个答案: