What is best way to pass value out from route change

Ember CLI
1

I have a my-header component on top of my webpage

        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#hamburger">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">app</a>
    </div>
    <div class="collapse navbar-collapse" id="hamburger">
        <ul class="nav navbar-nav">
          {{#each liStringArray as |item index|}}
              <li class={{if (eq activePosition index) 'active' ''}}>
                  <a href="{{item.route}}">{{item.name}}</a></li>
          {{/each}}

        </ul>

        <ul class="nav navbar-nav navbar-right">
            <li class={{if (eq activePosition 3) 'active' ''}}><a href="#/account/signup">signout</a></li>
            <li class={{if (eq activePosition 4) 'active' ''}}><a href="#/account/signin">signin</a></li>
        </ul>

    </div>
</div>

2 .I have a service called my-pre to keep valve(activePosition) to recode now active position (because I want set class value .active in my-header in li tag )

    export default Ember.Service.extend({
      activePosition: 0,});`

when click button send an action to it’s controller to set activePosition value

(ex:activePosition =0 first index li set active or activePosition =1;) t it is every tedious

2

Personally, I’d suggest just using {{link-to}}'s along with the ember-cli-active-link-wrapper addon Your template example would become (and without the need of a Service):

<div class="collapse navbar-collapse" id="hamburger">
    <ul class="nav navbar-nav">
        {{#each liStringArray as |item|}}
            {{#active-link}}
                {{link-to item.name item.route}}
            {{/active-link}}
        {{/each}}
    </ul>
    <ul class="nav navbar-nav navbar-right">
        {{#active-link}}
            {{link-to "signout" "account.signup"}}
        {{/active-link}}
        {{#active-link}}
            {{link-to "signin" "account.signin"}}
        {{/active-link}}
    </ul>
</div>
3

When I want programmably transitionTo other Route (ex:when not signin)

How to set class ‘.active’ on right {{#active-link}} ?

4

When I want programmably transitionTo other Route (ex:when not signin)

That is a completely different topic, but basically use the transitionTo() in either the Routes redirect() or beforeModel() hook (depending on your needs).

Unless you are trying to show different links in your template based on some status. Then you use the {{#if}} block. Something like:

<ul class="nav navbar-nav navbar-right">
  {{#if userSignedIn}}
    {{#active-link}}
      {{link-to "signout" "account.signup"}}
    {{/active-link}}
  {{else}}
    {{#active-link}}
      {{link-to "signin" "account.signin"}}
    {{/active-link}}
  {{/if}}
</ul>

How to set class ‘.active’ on right {{#active-link}} ?

That’s what the {{active-link}} does for you, automatically add/removes the .active class when a child {{link-to}} is active. There is no need to do that with your own {{if}}