Ember.js how to extend ember-cli-addon component

问题

I'm using Stripe in my Ember app, and I've set it up following the instructions here : https://github.com/sweettooth/ember-cli-stripe

so as my app stands right now, the ember-checkout component installed via this addon is in

myappname/node_modules/ember-cli-stripe/app/components/stripe-checkout

Now, I want to create a new component "my-stripe-checkout", and have it extend the default ember-cli-stripe component.

I have tried:

import StripeCheckoutComponent from '../node_modules/ember-cli-stripe/app/components/stripe-checkout';
import StripeCheckoutComponent from 'ember-cli-stripe/app/components/stripe-checkout';
import StripeCheckoutComponent from 'app/components/stripe-checkout';

in my my-stripe-checkout component that I generated via Ember g, but to no avail.

I always get an error of this pattern:

Could not find module `app/components/stripe-checkout` imported from `myappname/components/my-stripe-checkout`

And as per this question: How to extend an ember-cli addon?

I tried doing

import StripeCheckoutComponent from 'ember-cli-stripe/components/stripe-checkout';

but same error.

I've also tried both :

export default Ember.StripeCheckoutComponent.extend({ })

and

export default StripeCheckoutComponent.extend({})

to each iteration of the imports, but nothing seems to work. How do I extend an ember-cli-addon component?

回答1:

Well, you need to understand that the app directory of an addon is directly merged with your app structure. Its best practice to keep all code in the addon directory, however ember-cli-stripe hasn't done this. So from inside of your components directory you basically can do

import StripeCheckoutComponent from './stripe-checkout';

or

import StripeCheckoutComponent from 'YourAppName/components/stripe-checkout';

If the component would be in the addon directory of the addon the correct way would be:

import StripeCheckoutComponent from 'ember-cli-stripe/components/stripe-checkout';

来源：https://stackoverflow.com/questions/41749752/ember-js-how-to-extend-ember-cli-addon-component