如何在Angular中“扩展”和包装自定义组件或本机元素？ （以React为例）

Question

我目前正在尝试找出在Angular中“扩展”自定义组件或本机元素并用一些自定义标记包装的最佳方法是什么？这是我在React中经常做的事情，而且很有意义。看起来可能像这样：

type PasswordProps = {
  label: string;
} & Omit<InputHTMLAttributes<HTMLInputElement>, 'type'>;

export const Password: FC<PasswordProps> = ({ label, ...inputProps }) => {
  const id = useId();
  return (
    <>
      <label htmlFor={id}>{label}</label>
      <input name={id} type="password" {...inputProps} />
    </>
  );
};

我基本上想要现有组件/元素的专门版本和/或想要添加一些自定义行为。但是我也想“通过”我不碰的任何东西。

Answer 1

@Component({
  selector: 'app-your',
  template: `<label [for]="id">{{label}}</label><input [name]="id" type="password" />`
})
export class YourComponent implements OnInit {
  @Input() label: string;
  @Input() id: string;

  constructor() {}

  ngOnInit(): void {

  }
}

我认为默认情况下不存在将属性传递到输入字段的可能性，您必须将所有必需的（或可能的）属性定义为组件的@Input()值。

然后像<app-your label="Your Label" id="passField"></app-your>

那样调用您的组件