Ember.js如何扩展ember-cli-addon组件 [英] Ember.js how to extend ember-cli-addon component

问题描述

我正在Ember应用程序中使用Stripe，并且已按照此处的说明进行设置：
https://github.com/sweettooth/ember-cli-stripe

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

所以当我的应用程序现在站立时，通过此插件安装的ember-checkout组件位于

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

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

现在，我想创建一个新组件 my-stripe-checkout，并扩展默认的ember-cli-stripe组件。

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

我尝试过：

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';

在我通过Ember g生成的my-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`

根据这个问题：
如何扩展余烬-cli addon？

我尝试做

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

，但有相同的错误。

我也都尝试过：

export default Ember.StripeCheckoutComponent.extend({ })

和

export default StripeCheckoutComponent.extend({})

到每次导入重复，但似乎没有任何效果。我该如何扩展ember-cli-addon组件？

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

推荐答案

嗯，您需要了解 app 目录直接与您的应用结构合并。最好的做法是将所有代码保留在 addon 目录中，但是 ember-cli-stripe 却没有做到这一点。因此，从您的 components 目录内部，您基本上可以做到

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';

或

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';

这篇关于Ember.js如何扩展ember-cli-addon组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！