Storybook: تغيير المقابض من خلال الإجراءات [فكرة]

تم تقديم نوع من الأفكار المماثلة في هذا رقم 3701 للعلاقات العامة ، وكان ذلك مثيرًا للجدل (ولم يتم دمجه).

يمكننا فتح مناقشة حول هذا الموضوع مرة أخرى ، والاستماع إلى اقتراحات API =).

آه شكرًا لك ، لم أر ذلك العلاقات العامة. شكرًا aherriot على وضع ذلك معًا ، يبدو أن لدينا نفس الأفكار.

قبل الغوص في API ، يبدو أن المفهوم الأساسي يحتاج إلى المناقشة والاتفاق عليه. كان أحد التعليقات في العلاقات العامة هذا من Hypnosphi :

لا أحب حقيقة أنه يقدم مصادر متعددة للحقيقة (عمليات استدعاء المكون ومقابض واجهة المستخدم)

يبدو لي أن الفكرة ليست تقديم مصادر مختلفة للحقيقة ، بل السماح بالحفاظ على مصدر وحيد للحقيقة للحالة المكونة - المقابض. جميع الأساليب الأخرى التي رأيتها اقترحت (مكونات الغلاف ، والوظائف الإضافية للحالة ، وإعادة التكوين) ستقدم في الواقع مصدرًا آخر للحقيقة. في مثال مربع الاختيار الخاص بي ، لن أتمكن من الحصول على مقبض مقابل checked ، كما أنني أسمح لمكون الغلاف بتوفير الخاصية checked . أرى لوحة التحكم في المقابض بصفتها الوالد للمكون ، باستثناء أنه لا يمكنها حاليًا الحصول على أي عمليات رد نداء من المكون ، وهو نوع من جانب واحد وليس كيف يتم إنشاء تطبيقات التفاعل بشكل طبيعي.

من خلال السماح بالتحكم بالمقابض برمجيًا ، يمكن عزل القصة إلى المكون الذي يتم عرضه فقط ، تاركًا آلية إدارة الحالة الفعلية غير شفافة ، كما ينبغي أن يكون لمكون عرضي بسيط مثل مربع الاختيار. لا يهتم مربع الاختيار نفسه بكيفية حصوله على الدعائم الخاصة به ، فقد يتم توصيله بالإعادة ، وقد يستخدم والده setState ، أو ربما يستخدم withState من إعادة التكوين ، أو ربما يتم التحكم في الدعائم بواسطة مقابض القصص القصيرة.

على أي حال ، كما قلت ، أنا جديد جدًا على هذا ، لذلك أنا فقط أشارك أفكاري الحدسية. إذا كنت خارج القاعدة وهناك "أفضل ممارسة" مقبولة بشكل عام للتعامل مع هذه الأنواع من المكونات عديمة الجنسية ، فربما يمكن لشخص ما أن يوجهني إلى مثال جيد يمكنني اتباعه؟

أهلا :)

أريد فقط أن أضيف أنني عثرت على ذلك نظرًا لأن المكونات الخاصة بي تتلقى ما إذا كان ينبغي لها عرض تخطيطات الهاتف المحمول الخاصة بهم (أو لا) من الدعائم ، وكان هدفي هو ربط تغيير منفذ العرض بمقبضتي ، وكان من الممكن أن يكون رائعًا حقًا ؛)

أردت فقط إضافة حالة الاستخدام الخاصة بي هنا ، وبما أن IanVS حتى رد الاتصال سيكون

لقد سمعت أن العديد من الأشخاص يعبرون عن اهتمامهم بطريقة لتحديث حالة المقبض. إذا تمكنا من الاتفاق على بنية جيدة ، أعتقد أن هذا سيكون ذا قيمة لكثير من الناس. خاصة وأن هذه وظيفة إضافية يمكن للأشخاص اختيار استخدامها أم لا ولأنها لا تؤثر سلبًا على أولئك الذين لا يرغبون في استخدامها.

Hypnosphi ، كان لديك اعتراضات حول التطبيق السابق ، WDYT؟

التعليق هنا لإبقاء هذه القضية مفتوحة. ما زلت أشعر بالفضول بشأن ما يجب أن يقوله Hypnosphi حول @ igor-dv الذي سبق اقتراحه هنا.

يبدو لي أن الفكرة ليست تقديم مصادر مختلفة للحقيقة ، بل السماح بالحفاظ على مصدر واحد للحقيقة للحالة المكونة - المقابض. جميع الأساليب الأخرى التي رأيتها اقترحت (مكونات الغلاف ، والوظائف الإضافية للحالة ، وإعادة التكوين) ستقدم في الواقع مصدرًا آخر للحقيقة. في مثال مربع الاختيار الخاص بي ، لن أتمكن من الحصول على مقبض لفحصه ، وكذلك السماح لمكون غلاف لتوفير الدعامة المحددة. أرى لوحة التحكم في المقابض بصفتها الوالد للمكون ، باستثناء أنه لا يمكنها حاليًا الحصول على أي عمليات رد نداء من المكون ، وهو نوع من جانب واحد وليس كيف يتم إنشاء تطبيقات التفاعل بشكل طبيعي.

تبدو معقولة بالنسبة لي. دعونا نناقش API

ستكون هذه ميزة رائعة. لقد واجهت هذه الحاجة نفسها هنا مع مكون أساسي مضبوط للغاية وواجهته من قبل في مكونات أخرى أيضًا. شكرا للنظر في ذلك.

يبدو أن مواكبة البنية الحالية يمثل تحديًا بسيطًا. ربما يمكنك استخدام شيء مثل:

const {value: name, change: setName} = text('Name', 'Kent');

brunoreis ، أود أن أقلق من أن تغيير توقيع الإرجاع للمقابض سيكون بمثابة تغيير جذري. اقتراحي غير المألوف هو القيام بشيء مثل:

import {boolean, changeBoolean} from '@storybook/addon-knobs/react';

stories.add('custom checkbox', () => (
    <MyCheckbox
        checked={boolean('checked', false)}
        onChange={(isChecked) => changeBoolean('checked', isChecked)} />
));

حيث قد يسمح رد الاتصال onChange حتى بالكاري ، بحيث يعمل هذا أيضًا:

onChange={(isChecked) => changeBoolean('checked')(isChecked)}

// which of course simplifies down to
onChange={changeBoolean('checked')}

الجزء المهم هو أن الحجة الأولى يجب أن تكون مماثلة لتسمية المقبض الذي يجب تغييره. أعتقد أن هذا سيسمح للمستخدمين بالاشتراك في هذا السلوك دون تغيير أي شيء حول طريقة استخدام المقابض حاليًا. (ما لم تكن التصنيفات غير مطلوبة حاليًا لتكون فريدة؟ أفترض أنها…)

IanVS ، هذا لطيف. أتفق معك في عدم تغيير طريقة عمل الأشياء. لم أجد طريقة للقيام بذلك لأنني لم أفكر في استخدام الملصق كمفتاح. التي يمكن أن تعمل. دعونا نرى ما يدور في خلد

تغيير توقيع الإرجاع للمقابض سيكون بمثابة تغيير فاصل

من الناحية الفنية ، هذه ليست مشكلة في الوقت الحالي. لدينا إصدار كبير قادم. ولكن سيكون من الأفضل بالفعل السماح ببعض التوافق مع الإصدارات السابقة.

تعجبني فكرة طلب الدعم.

ما لم تكن التصنيفات غير مطلوبة حاليًا لتكون فريدة؟

نعم هم كذلك ، وفي الواقع هم فريدون عبر أنواع مختلفة. لذلك لن تكون هناك حاجة إلى عمليات تصدير منفصلة لـ change<Type> ، فقط change يجب أن يكون كافياً. هذا هو الأساس الذي تم صنعه في https://github.com/storybooks/storybook/pull/3701
أعتقد أنني سأعيد فتح هذا العلاقات العامة للسماح لـ

يمكننا الحصول على هذا:

const {value: name, change: setName} = text('Name', 'Kent');

دون الحاجة إلى تغيير نوع الإرجاع text .

وظائف جافا سكريبت هي كائنات وبالتالي يمكن أن يكون لها خصائص.
يمكن تدمير الكائن.

ndelangen الدالة text هي بالفعل كائن ، لكن قيمتها المرجعة ليست كذلك. لن يعمل هذا في المثال الخاص بك:

const { foo, bar } = x() // note the parens

يمكن أن يكون لدينا شيء كهذا (الاسم قابل للجدل):

const {value: name, change: setName} = text.mutable('Name', 'Kent');

لماذا لا يعمل هذا؟

const { foo, bar } = x() // note the parens

عودة x هي دالة يمكن أن يكون لها خصائص أيضًا.

كنت أتحدث عن x = () => {} من مثالك الأصلي.

إذا جعلنا text يعيد دالة ، فسيحتاج المستخدمون إلى تغيير الكود الخاص بهم:

// Before
<Foo bar={text('Bar', '')}>

// After
<Foo bar={text('Bar', '')()}>
                         ^^ this

أرى

ماذا عن اقتراح IanVS لهذا؟

سيكون من الرائع الحصول على هذه الميزة.

ماذا عن "التدمير" مثل "رد فعل الخطافات"؟:

const [foo, setFoo] = useString('foo', 'default');

جاء ليقول نفسDimaRGB
سيكون قادرًا على الحفاظ على بناء الجملة الحالي وإضافة مكالمات تشبه الخطاف ، على سبيل المثال:

.add('example', () => {
  const [selected, setSelected] = useBool(false);

  return <SomeComponent selected={selected} onSelected={setSelected} />
})

لا يُفترض في بعض الأحيان أن تقوم مكونات التفاعل بتحديث props الخاصة بهم ، ولكن بدلاً من ذلك أخبر الوالدين أنهم بحاجة إلى التغيير. في بعض الأحيان ، يحتوي أحد المكونات على بعض العناصر التي من المفترض أن تقوم بتبديل الدعائم الخاصة به (لقد واجهت هذا لأنه في بعض الأحيان أحتاج إلى قائمة شريط التنقل التي أحتاجها لفتح نفسها إذا تم النقر فوق عنصر فرعي).

IanVS لدي نفس الموقف بالضبط حيث لدي مكون تبديل يتم تحديثه فقط عبر الدعائم الرئيسية وبمجرد قيام مستخدم قصة القصة بتبديلها ، فإن حالة واجهة المستخدم غير متوافقة مع ما هو معروض في لوحة المقابض. لقد اخترقتها باستخدام طريقة خاصة من @storybook/addons-knobs - اقتراح أبسط هو توفير واجهة برمجة تطبيقات رسمية للقيام بشيء مثل:

import { manager } from '@storybook/addons-knob/dist/registerKnobs.js'

const { knobStore } = manager
// The name given to your knob - i.e:  `select("Checked", options, defaultValue)`
knobStore.store['Checked'].value = newValue
// Danger zone! _mayCallChannel() triggers a re-render of the _whole_ knobs form.
manager._mayCallChannel()

erickwilder لقد جربت طريقتك ولكن لم يبد أن ذلك يحدّث نموذج المقبض أبدًا (حتى عندما قام بتحديث الدعائم المتوفرة للمكون).

تعديل:

خدش ذلك لم أر هذه التحديثات لأنني كنت أستخدم الخيارات () مع مربعات الاختيار التي يتم تشغيلها بطريقة "غير متحكم فيها" على ما يبدو. من خلال التبديل إلى التحديد المتعدد واستخدام هذه الطريقة في رد الاتصال ، حصلت على القيم المحدثة في شكل المقبض:

// Ditch when https://github.com/storybooks/storybook/issues/3855 gets resolved properly.
function FixMeKnobUpdate(name, value) {
    addons.getChannel().emit(CHANGE, { name, value });
}

ربما أغفلت بعض تفاصيل الإعداد الخاص بي:

• نحن نستخدم Vue.js مع Storybook
• تم إجراء الكود الذي يغير القيمة ويطلق إعادة التصيير داخل عملية إذا كان مكون التفاف المجموعة النصية.

لا أعرف ما إذا كان هذا النهج سيعمل مع الجميع.

أتفق تمامًا مع IanVS ، أحب كتاب القصص ولكني أفتقد حقًا القدرة على تحديث المقابض من خلال الإجراءات. في حالتي ، لدي مكونان فرديان A و B ولكن في إحدى قصصي أريد أن أظهر تركيبة باستخدام كلاهما ، بحيث عندما أغير الذكاء الاصطناعي يصدر إجراء من شأنه تعديل B والعكس بالعكس.

لقد جربت اختراقerickwilder من خلال الإعداد الخاص بي (Angular 7) ، ولكن كلما حاولت تحديث متجر المقبض ، أتلقى الخطأ التالي:

خطأ: من المتوقع ألا تكون في Angular Zone ، لكنها كذلك!

لقد حاولت بطريقة ما تشغيل هذا خارج Angular لكنني لم أتمكن من القيام بذلك ... أسوأ سيناريو ، سأقوم بإنشاء مكون ثالث C والذي سيكون غلافًا لـ A و B.

davidolivefarga الحل المؤقت من erickwilder يجب أن يعمل مع أي إطار عمل لأنه لا يرتبط بالإطار / المكتبة (رد فعل ، زاوية ، vue ، أي شيء آخر) ولكن لإعادة عرض الملحق المقابض.

عملت من أجلنا باستخدام React بنفس الطريقة المذكورة أعلاه

+1 لإضافة طريقة مرئية بشكل عام للتشغيل ، تحتوي على اسم مقبض الباب كسلسلة للتحديث وقيمة جديدة ، على سبيل المثال:

import { manager } from "@storybook/addon-knobs"

manager.updateKnob(
  propName, // knobs property, example from above "Checked"
  newValue, // new value to set programmatically, ex. true
)

أود حقًا أن يتم دعم هذا رسميًا.

في هذه الأثناء ، مع Storybook v5 كان علي أن أستخدم هذا الحل المخترق الرهيب:

window.__STORYBOOK_ADDONS.channel.emit('storybookjs/knobs/change', {
  name: 'The name of my knob',
  value: 'the_new_value'
})

🙈

🙈

ذات صلة: # 6916

سيكون هذا رائعًا ... خاصةً لأن الوسائط.

أعتقد أن هذا سيكون مفيدًا.

مثال:

storiesOf('input', module)
  .addDecorator(withKnobs)
  .add('default', () => <input type={text('type', 'text')} value={text('value', '')} disabled={boolean('disabled', false)} placeholder={text('placeholder', '')} onChange={action('onChange')} />)

يعمل هذا حاليًا ، ولكن يبدو من الطبيعي أننا نريد ربط القيمة المستهدفة لحدث onChange بالقيمة المحددة في الدعائم للعنصر الذي تم اختباره. هذا من شأنه أن يوضح بشكل أفضل تطبيق العنصر.

سيكون هذا مفيدا

+1 لـ @ mathieuk / raspo للإشارة إلى حل هنا.

من المحتمل أن نتمكن من الوصول إلى هذا بطريقة أخرى أيضًا. إنشاء عدة طرق عامة في وحدة helpers ؟

import addons from "@storybook/addons";

export const emitter = (type, options) => addons.getChannel().emit(type, options);

export const updateKnob = (name, value) => (
  emitter("storybookjs/knobs/change", { name, value })
);

والدعوة حسب الحاجة في القصص ...

import { text } from "@storybook/addon-knobs";
import { updateKnob } from 'helpers';

// ...
const value = text("value", "Initial value");
<select
  value={value}
  onChange={({ target }) => updateKnob("value", target.value)}
>

... ولكن لا يزال يبدو وكأنه حل بديل غير تقليدي للربط ثنائي الاتجاه لشيء يمكن تضمينه في واجهة برمجة تطبيقات المقابض

أي تحديث على ما سبق؟ ستكون ميزة مفيدة جدا 👍

ستتيح لنا هذه الميزة التي يتم تنفيذها القيام ببعض المقابض القوية المعتمدة على التبادلية بسهولة تامة. تخيل إنشاء قصة مكون ترقيم الصفحات إذا كان بإمكانك تحديث مقبض واحد ديناميكيًا اعتمادًا على الآخر ، مع شيء مثل هذا في قصتك:

const resultsCount = number(
    'Results count',
    currentPage, {
        max: 100,
        min: 0,
        range: true
    }
);
const resultsArray: React.ReactNode[] = new Array(resultsCount)
    .fill(true)
    .map((_, idx) => <div key={idx + 1}>Test Pagination Result #{idx + 1}</div>);
const childrenPerPage = 10;
const currentPage = number(
    'Current page index',
    0, {
        max: Math.ceil(resultsCount / childrenPerPage) - 1,
        min: 0,
        range: true
    }
);

لقد حاولت القيام بذلك بشكل أساسي ، على أمل أن يتم تحديث النطاق الأقصى لمقبض currentPage بشكل ديناميكي عند زيادة مقبض resultsCount بزيادة 10 ، ولكن يبدو أن القيمة الأولية لكل مقبض يتم تخزينه مؤقتًا في وقت الإنشاء ولا يعتاد على تجاوز قيم الحالة الداخلية في عمليات العرض اللاحقة. مع الكود أعلاه عندما أقوم بزيادة resultsCount بمقدار 10+ ، أتوقع زيادة max currentPage أيضًا بمقدار 1 ، ومع ذلك تظل قيمتها كما هي على الرغم من أن القيم الأساسية تستخدم لحساب أنها تغيرت (تسجيل Math.ceil(resultsCount / childrenPerPage) - 1 يظهر القيمة الجديدة المتوقعة).

لقد انتهينا تقريبًا من الإصدار 5.3 (إصدار يناير المبكر) وننظر في إعادة كتابة المقابض لـ 6.0 (إصدار أواخر مارس) والتي ستحل مجموعة من مشكلات المقابض طويلة الأمد. سأرى ما إذا كان بإمكاننا العمل في هذا! شكرا لصبرك!

shilman أنا متحمس جدًا لهذه الميزة 😄

لقد عملت Me و @ PlayMa256 على الأساس لهذا منذ فترة. سيستغرق الأمر بعض التكرارات الإضافية للحصول على المعلومات الصحيحة ، لكنني أشعر بثقة كبيرة في إمكانية الوصول إلى 100٪ في الإصدار 6.0.0 وإحداث ثورة في البيانات والتفاعل في القصص المصورة.

ثورة؟ diggity لعنة الساخنة. توقف عن مضايقتي ، جسدي جاهز.

+1 للشروط :)

لا أصدق أنه مستحيل منذ البداية. في انتظار التحديثات ...

مرحبا يا رفاق!
كحل مؤقت استخدمته في تطبيقي الكود التالي:

import { addons } from '@storybook/addons';
import { CHANGE } from '@storybook/addon-knobs';

const channel = addons.getChannel();

channel.emit(CHANGE, {
  name: 'prop_name',
  value: prop_value,
});

ما زلت تنتظر سيتم تنفيذ هذه الميزة محليًا.

لقد حللت هذه المشكلة باستخدام يمكن ملاحظتها. أنا أستخدم القصص القصيرة مع الزاوية

"
.add ('تحديث بيانات الرسم البياني'، () => {

const myObservable= new BehaviorSubject([{a: 'a', b: 'b'}]);
return {
  template: '
  <my-component
    myInput: myData,
    (myEvent)="myEventProp($event)"
  ></my-component>
  ',
  props: {
    myData: myObservable,
    myEventProp: $event => {
      myObservable.next([]);
      action('(myEvent)')($event);
    }
  }
};

})
"

@ norbert-doofus بفضل مثالك ساعدني 👍

مرحبًا يا عصابة ، لقد أطلقنا للتو عناصر تحكم إضافية في الإصدار 6.0 بيتا!

أدوات التحكم عبارة عن مقابض محمولة يتم إنشاؤها تلقائيًا تهدف إلى استبدال المقابض الإضافية على المدى الطويل.

• الضوابط README
• تعليمات الهجرة

يرجى الترقية وتجربتها اليوم. نشكرك على مساعدتك ودعمك للحصول على هذا الاستقرار للإفراج عنه!

هذا جيد! لا أستطيع أن أعرف تمامًا من قراءة README (ربما فاتني) ، هل يمكن تغيير controls برمجيًا ، وهو الطلب الذي تم إجراؤه في هذه المشكلة؟

يمكن أن يكونوا كذلك ، على الرغم من أنني لست متأكدًا من أن واجهة برمجة التطبيقات مدعومة رسميًا حتى الآن (ونحن نفعل ذلك بالضبط لعناصر التحكم في المستندات الإضافية). سأعمل مع tmeasday لاكتشاف أفضل طريقة للحصول على ذلك بعد استقرار الجولة الأولى من عناصر التحكم.

• [] أضف updateArgs إلى سياق القصة؟
• [] جعل سياق القصة متاحًا لمعاودة الاتصال التي يتم استدعاؤها من القصة؟ ( this.context?.updateArgs(....) )

بالنسبة لأي شخص مهتم بـ Controls ولكن لا يعرف من أين يبدأ ، فقد قمت بإنشاء تجول سريع وقذر خطوة بخطوة للانتقال من مشروع CRA جديد إلى عرض توضيحي عملي. تحقق من ذلك:

=> عناصر التحكم في Storybook w / CRA و TypeScript

هناك أيضًا بعض "مقابض للتحكم" في مستندات الترحيل في عناصر التحكم README:

=> كيف أقوم بالترحيل من المقابض الإضافية؟

مرحبا يا رفاق!
كحل مؤقت استخدمته في تطبيقي الكود التالي:

import { addons } from '@storybook/addons';
import { CHANGE } from '@storybook/addon-knobs';

const channel = addons.getChannel();

channel.emit(CHANGE, {
  name: 'prop_name',
  value: prop_value,
});

ما زلت تنتظر سيتم تنفيذ هذه الميزة محليًا.

ضع في اعتبارك أنه عند استخدام groupId ستحتاج إلى إضافة معرف المجموعة إلى name النحو التالي:

 const show = boolean('Show Something', true, 'Group')

channel.emit(CHANGE, {
  name: 'Show Something_Group',
  value: prop_value,
});

أيضًا ، channel هو EventEmitter ، لذا يمكنك addListener للتحقق من المعلمات التي يتم استلامها.

channel.addListener(CHANGE, console.log)

إليك مقتطف الشفرة لأي شخص مهتم بكيفية القيام بذلك باستخدام addon-controls في الإصدار السادس.

import { useArgs } from '@storybook/client-api';

// Inside a story
export const Basic = ({ label, counter }) => {
    const [args, updateArgs] = useArgs();
    return <Button onClick={() => updateArgs({ counter: counter+1 })>{label}: {counter}<Button>;
}

لا أعرف ما إذا كانت هذه هي أفضل واجهة برمجة تطبيقات لهذا الغرض ولكن يجب أن تعمل. مثال في monorepo:

https://github.com/storybookjs/storybook/blob/next/examples/official-storybook/stories/core/args.stories.js#L34 -L43

شكرا @ shilman! هذا ما فعل الحيلة.

للأشخاص المهتمين ، لدينا خاصية Checkbox story checked التي بدأت هذا الموضوع بأكمله. إليكم قصتنا التي تم توصيلها حديثًا باستخدام Storybook 6.0.0-rc.9:

export const checkbox = (args) => {
  const [{ checked }, updateArgs] = useArgs();
  const toggleChecked = () => updateArgs({ checked: !checked });
  return <Checkbox {...args} onChange={toggleChecked} />;
};
checkbox.args = {
  checked: false,
  label: 'hello checkbox!',
};
checkbox.argTypes = {
  checked: { control: 'boolean' },
};

shilman لقد حاولت استخدام useArgs في قصة لإدخال نص متحكم فيه (حالة قد نستخدم فيها عادةً الخطاف useState لتحديث خاصية value للمكون عبر حدثها onChange ). ومع ذلك ، واجهت مشكلة حيث في كل مرة يكتب فيها المستخدم حرفًا ، يفقد المكون التركيز. هل هذا ربما يكون سببه تحديث / إعادة عرض القصة في كل مرة نقوم فيها بتحديث المنشورات؟

هل هناك طريقة مختلفة موصى بها لاستخدام args / عناصر التحكم لمكون مع إدخال نص متحكم فيه؟

كان هذا مع 6.0.0-rc.13

jcq هل يمكنك إنشاء إصدار جديد باستخدام repro؟ لم تكن هذه هي حالة الاستخدام الأساسية لـ useArgs ، لكنها بالتأكيد حالة نرغب في دعمها ، لذلك يسعدنا البحث فيها.

shilman no prob -
https://github.com/storybookjs/storybook/issues/11657

كان يجب أن أوضح أيضًا أن السلوك الخاطئ يظهر في المستندات ، بينما يعمل بشكل صحيح في وضع Canvas العادي.

لقد حللت هذه المشكلة باستخدام يمكن ملاحظتها. أنا أستخدم القصص القصيرة مع الزاوية

"
.add ('تحديث بيانات الرسم البياني'، () => {

const myObservable= new BehaviorSubject([{a: 'a', b: 'b'}]);
return {
  template: '
  <my-component
    myInput: myData,
    (myEvent)="myEventProp($event)"
  ></my-component>
  ',
  props: {
    myData: myObservable,
    myEventProp: $event => {
      myObservable.next([]);
      action('(myEvent)')($event);
    }
  }
};

})
"

لقد نجح هذا بالنسبة لي باستخدام Angular ولكن التغيير إلى myData.value في السطر 5

لم أجرب هذا بعد (عالق في إصدار قديم من القصص القصيرة في الوقت الحالي) ولكن يبدو أنه يمكن إغلاق هذه المشكلة الآن. شكرا للعمل الرائع على args / الضوابط!