Overriding LinkComponent EmberJs 1.13.15

Question

Im Using EmberJs 1.13.15 and Ember-CLI , i was trying to slightly modify the main LinkComponent behavior by adding the following code:

app/components/nav-link-to.js:

import Ember from 'ember';

export default Ember.LinkComponent.extend({
  tagName: 'li'
});

app/templates/components/nav-link-to.hbs:

<a href="">{{yield}}</a>

and im using this component in:

app/templates/nav-bar.hbs:

<ul class="nav navbar-nav">
   {{#nav-link-to 'index'}}Home{{/nav-link-to}}
</ul>

but whenever i open the nav-bar template in the browser nothing shows up and in ember inspector's console it shows the following error

Uncaught TypeError: Cannot read property 'slice' of undefined

Any help?

Thanks in advance.

Answer 1

You will have to add the params in your component. Also you will have to call this._super in init method of component. Below is the working component code for extended link-to.

import Ember from 'ember';
export default Ember.LinkComponent.extend({
    tagName: 'li',
    positionalParams: 'params',
    init: function() {
      this._super(...arguments);
    },
    didReceiveAttrs: function() {
      this.attrs.params = this.get('params');
      this.attrs.hasBlock = true;
    }
});