我是否必须创建一个指令来解决这个问题

Question

这是徽章指令的故事。

import { Story, Meta } from '@storybook/angular/types-6-0';
import { BadComponent } from '../projects/ui-elements/src/lib/bad/bad.component';

const Template: Story<BadComponent> = () => ({
   
    template: '<div   badge ></div>'
});

export default {
    title: 'Elements/Badge',
    component:BadComponent
};

export const Principal = Template.bind({});
Principal.args = {
    template: '<div badge>small </div>'

};

export type BadgeSizes = "small" | "medium" | "large";

export type BadgePositions =
  | "top-right"
  | "top-left"
  | "bottom-right"
  | "bottom-left";

export type BadgeVariants = "primary" | "secondary";

这是 mon BadgeDirective.ts 。徽章功能齐全

import {  Directive,  ElementRef,  Inject,  Input,  OnChanges,  OnDestroy,  SimpleChanges} from "@angular/core";
import { DOCUMENT } from "@angular/common";
import { BadgeSizes, BadgePositions, BadgeVariants } from "./badge.interface";

@Directive({
  selector: "[badge]"
})
export class BadgeDirective implements OnChanges, OnDestroy {
  @Input() badge = null;
  @Input() size: BadgeSizes = "medium";
  @Input() position: BadgePositions = "top-right";
  @Input() customBadgeClasses: string | null = null;
  @Input() variant: BadgeVariants = "secondary";

  badgeElement: HTMLElement | null = null;

  constructor(
    @Inject(DOCUMENT) private document: Document,
    private elRef: ElementRef<HTMLElement>
  ) {}
  ngOnChanges(changes: SimpleChanges): void {
    if ("badge" in changes) {
      const value = `${changes.badge.currentValue}`.trim();
      if (value?.length > 0) {
        this.updateBadgeText(value);
      }
    }
  }

  ngOnDestroy() {
    if (this.badgeElement) {
      this.badgeElement.remove();
    }
  }

  private updateBadgeText(value: string) {
    if (!this.badgeElement) {
      this.createBadge(value);
    } else {
      this.badgeElement.textContent = value;
    }
  }

  private createBadge(value: string): HTMLElement {
    const badgeElement = this.document.createElement("span");
    this.addClasses(badgeElement);
    badgeElement.textContent = value;
    this.elRef.nativeElement.classList.add("badge-container");
    this.elRef.nativeElement.appendChild(badgeElement);
    return badgeElement;
  }

  private addClasses(badgeElement: HTMLElement) {
    const [vPos, hPos] = this.position.split("-");
    badgeElement.classList.add("badge", vPos, hPos);
    if (this.customBadgeClasses) {
      const customClasses = this.customBadgeClasses.split(" ");
      badgeElement.classList.add(...customClasses);
    }
    badgeElement.classList.add(this.variant);
    badgeElement.classList.add(this.size);
  }
}

您好，我的故事书有问题。我想创建一个徽章（我不知道我是否必须做一个comonent或一个指令，但我创建了一个指令）。 徽章显示一半。不显示上面的数字。请帮忙

Answer 1

（我不知道我是否必须做一个comonent或一个指令，但我创建了一个指令）。

我们不能只选择编写指令或组件！

指令：用于向 DOM 添加一些行为，例如更改文本颜色或添加一些文本。

组件：是一个带有视图的指令（如果你愿意的话，一个带有视图的类）。 它是 Angular 应用程序最基本的 UI 构建块。 所以，每当你想创建一个模板并显示一些数据时，你都应该使用组件。

你的问题还不够清楚，但看来你应该使用一个组件。