ボタンをクリックして角を変えてクリックすると、角2のボタンが表示されます

Question

角度2のアプリにメインナビゲーションコンポーネントがあり、ナビゲーション内のアイテムがクリックされると、選択されたCSSクラスが選択されたナビゲーションアイテムに適用されます。私のアプリのページの1つに私がぶら下がっているものがあります。そのボタンをクリックすると、ユーザーは別のページに移動し、それに応じてメインナビゲーションを変更したいと思っています。ここで

は、私のコードの一部抜粋です：

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を使用して、アプリケーションの状態が格納されている単一のストアを持つことができます。しかし、ここでそれをシンプルに保つために他の方法のカップルです：

あなたの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