Changes to uiSref target state are not propagated to other directives

[jonrimmer]

If I have a dynamic binding to uiSref, as follows:

<a
  [uiSref]="someDynamicLink"
  uiSrefActive="active"
>Some Dynamic Link
</a>

Changes to someDynamicLink do not result in directives like uiSrefActive updating themselves. E.g. if the value of someDynamicLink is changed, the active state of the link is not updated to reflect whether the new value matches the current path.

The problem seems to lie with the strange way the uiSref directive defines its input properties. There is an @input('uiSref') decorator applied to the state property, but changes to this field do not cause any event to be emitted on the targetState$ subject. There is a setter called "uiSref" and marked @internalapi, which wraps state and does emit an event on targetState$, but this will not be called by Angular, as it is not marked as an input.

I was able to get things working by replacing:

@Input('uiSref') state: string;

With...

private _state: string;

/**
 * `@Input('uiSref')` The name of the state to link to
 *
 * ```html
 * <a uiSref="hoome">Home</a>
 * ```
 */
@Input('uiSref') 
set state(val) {
  this._state = val;
  this.update();
}

get state() {
  return this._state;
}

But I'm not clear on what purpose the "uiSref" property setter serves, and whether there was any rationale behind it firing updates rather than state?

[jonrimmer]

If you need a workaround to this issue, then declaring the following directive in your own app module will makes things work, until it can be fixed upstream.

import { Directive, Input, ContentChild } from '@angular/core';
import { UISref } from '@uirouter/angular';

@Directive({
  selector: '[uiSref]'
})
export class UISrefFix {
  @ContentChild(UISref) sref: UISref;

  @Input('uiSref')
  set uiSref(val) {
    if (this.sref) {
      setTimeout(() => this.sref.update(), 0);
    }
  }
}