diff --git a/packages/ember-glimmer/lib/components/link-to.ts b/packages/ember-glimmer/lib/components/link-to.ts index 7eb44740ad1..2b5c671e7fb 100644 --- a/packages/ember-glimmer/lib/components/link-to.ts +++ b/packages/ember-glimmer/lib/components/link-to.ts @@ -573,7 +573,7 @@ const LinkComponent = EmberComponent.extend({ return this.get('_active') ? get(this, 'activeClass') : false; }), - _active: computed('_routing.currentState', function computeLinkToComponentActive(this: any) { + _active: computed('_routing.currentState', 'attrs.params', function computeLinkToComponentActive(this: any) { let currentState = get(this, '_routing.currentState'); if (!currentState) { return false; } return this._isActive(currentState); diff --git a/packages/ember-glimmer/tests/integration/components/link-to-test.js b/packages/ember-glimmer/tests/integration/components/link-to-test.js index fbfb2062bd9..cf284553778 100644 --- a/packages/ember-glimmer/tests/integration/components/link-to-test.js +++ b/packages/ember-glimmer/tests/integration/components/link-to-test.js @@ -43,6 +43,30 @@ moduleFor('Link-to component', class extends ApplicationTest { }); } + ['@test re-computes active class when params change'](assert) { + let controller; + + this.addTemplate('application', '{{link-to "foo" routeName}}'); + + this.add('controller:application', Controller.extend({ + init() { + this._super(...arguments); + controller = this; + }, + routeName: 'index' + })); + + this.router.map(function() { + this.route('bar', { path: '/bar' }); + }); + + return this.visit('/bar').then(() => { + assert.equal(this.firstChild.contains('active'), false); + this.runTask(() => set(controller, 'routeName', 'bar')); + assert.equal(this.firstChild.contains('active'), true); + }); + } + ['@test escaped inline form (double curlies) escapes link title']() { this.addTemplate('application', `{{link-to title 'index'}}`); this.add('controller:application', Controller.extend({