Storybook загружает данные в ранее увиденный компонент, поскольку оба компонента имеют одинаковое имя свойства

Question

Объяснить это может быть сложно, поэтому я покажу несколько скриншотов.

У меня есть два Angular компонента: LineChart и LineAreaChart - оба имеют dataset @Input (), который я использую для загрузить данные в компоненты и вызвать рисование диаграммы, перерисовку. Поскольку LineAreaChart показывает как линии, так и область, dataset @Input имеет различный интерфейс.

В сборнике рассказов у ​​меня есть несколько историй для обоих компонентов. Проблема в том, что я перехожу из истории для компонента LineChart в компонент LineAreaChart или наоборот.

Я установил, что Storybook обновляет набор данных в соответствии с моими историями, но сначала пытается загрузить его в текущий компонент Например:

Я смотрю на компонент LineChart, я нажимаю на историю для LineAreaChart, Storybook загружает данные для LineAreaChart, но сначала в компонент LineChart, вызывая ошибку, затем загружает LineAreaChart с правильными данными для этого компонента и всех хорошо в пользовательском интерфейсе, за исключением некоторых ошибок в консоли chrome.

Если я поменяю имя dataset @Input для одного из этих компонентов на data Сборник рассказов не загружает новые данные в компонент, с которым я просто ухожу, но я не могу этого сделать - потому что в библиотеке, которую я создаю, будет больше диаграмм, и я хочу, чтобы они имели единый интерфейс @Input @Output

Я покажу вам несколько историй для этих двух компонентов:

LineAreaChart:

export const MultiLineWeeklyWithSpecifiedXAxisTicks = () => {

  console.log('+++++++++++ area line story +++++++++++++++++++++++++');

  return {
    component: AreaLineChartComponent,
    props: {
      dataset: {
        line: lineDataWeekIntervalMock,
        area: areaDataWeekIntervalMock
      },
      lineColors: [EColors.Blue, EColors.Pink],
      areaColors: [EColors.LightGraySemiOpaque],
      xAxisTicks: getTickValues('name', 4, lineDataWeekIntervalMock[0]),
    }
  };
};

LineChart:

export const SingleLineWeeklyWithSpecifiedXAxisTicks = () => {

  console.log('--------------- line story -------------------');

  return {
    component: LineChartComponent,
    props: {
      dataset: [lineDataWeekIntervalMock[0]],
      colors: [EColors.Pink],
      xAxisTicks: getTickValues('name', 4, lineDataWeekIntervalMock[0])
    }
  };
};

Итак, на скриншоте ниже я смотрел «Единичная линия еженедельно с указанными отметками оси X» и перешел на «Многострочный еженедельно с указанной осью X» История галочек.

Теперь взгляните на консоль справа:

Объект данных со свойствами line и area правильно установлен в истории для LineAreaChart, но как Вы можете видеть в журнале консоли фиолетового цвета - он загружается в LineChartComponent - что, черт возьми, происходит с этим? Линейная диаграмма никогда не должна получать эти данные, но каким-то образом, когда вы перемещаетесь между историями различных компонентов в Storybook, ей удается загрузить данные в компонент, с которым вы переходите (потому что у них обоих одинаковый @Input с именем 'dataset') - это вызывает ошибку, а затем загружает те же данные, но в компонент, в который вы вошли - что и предназначалось в первую очередь -> см. код моих историй рассказов, который я вставил выше.

Кто-нибудь сталкивался с таким же поведением?