Angular Badge在Storybook显示不全，是否需通过自定义指令解决？

用指令实现Badge是合理方案，无需更换为组件，你遇到的显示问题由可修复的配置、样式、逻辑问题导致，按以下步骤调整即可：

1. 补全核心CSS样式（显示不全的主要原因） #

你当前仅给元素加了类名，但缺少对应的定位、偏移、容器样式，导致徽标定位错误被父元素截断，添加以下全局样式即可：

/* 徽标挂载的父容器样式 */
.badge-container {
  position: relative;
  display: inline-flex;
  /* 禁止父容器截断超出内容 */
  overflow: visible !important;
}

/* 徽标基础样式 */
.badge {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25em;
  line-height: 1;
  border-radius: 1em;
  font-weight: 500;
  color: #fff;
  /* 偏移修正避免贴边显示不全 */
  transform: translate(50%, -50%);
}

/* 位置对应样式 */
.badge.top { top: 0; }
.badge.bottom { bottom: 0; transform: translate(50%, 50%); }
.badge.left { left: 0; transform: translate(-50%, -50%); }
.badge.right { right: 0; }
.badge.bottom.left { transform: translate(-50%, 50%); }

/* 尺寸样式 */
.badge.small { font-size: 0.65em; padding: 0.2em; }
.badge.medium { font-size: 0.75em; padding: 0.25em; }
.badge.large { font-size: 0.85em; padding: 0.3em; }

/* 主题样式 */
.badge.primary { background: #1976d2; }
.badge.secondary { background: #757575; }

2. 修正Storybook配置错误 #

你当前的Story没有声明Badge指令、也没有正确传递徽标内容输入值，Angular无法识别[badge]选择器，修正后的配置如下：

import { Story, Meta } from '@storybook/angular/types-6-0';
import { BadgeDirective } from './badge.directive';
import { CommonModule } from '@angular/common';

const Template: Story<BadgeDirective> = (args) => ({
  moduleMetadata: {
    declarations: [BadgeDirective],
    imports: [CommonModule]
  },
  props: args,
  template: '<div [badge]="badgeContent" [size]="size" [position]="position">测试元素</div>'
});

export default {
  title: 'Elements/Badge',
  argTypes: {
    size: { control: 'select', options: ['small', 'medium', 'large'] },
    position: { control: 'select', options: ['top-right', 'top-left', 'bottom-right', 'bottom-left'] },
    variant: { control: 'select', options: ['primary', 'secondary'] }
  }
} as Meta;

export const Principal = Template.bind({});
Principal.args = {
  // 传递徽标显示的内容
  badgeContent: '9',
  size: 'medium',
  position: 'top-right',
  variant: 'secondary'
};

3. 完善指令边界逻辑 #

补充徽标内容为空时的销毁逻辑，避免残留无用元素：

ngOnChanges(changes: SimpleChanges): void {
  if ("badge" in changes) {
    const value = `${changes.badge.currentValue ?? ''}`.trim();
    if (value?.length > 0) {
      this.updateBadgeText(value);
    } else if (this.badgeElement) {
      // 空值时清理徽标
      this.badgeElement.remove();
      this.badgeElement = null;
      this.elRef.nativeElement.classList.remove("badge-container");
    }
  }
}

内容的提问来源于stack exchange，提问作者Imen Jlassi