Question

我想做什么

我想创建一个可重复使用的Angular 2按钮组件，该组件可以呈现为<a />标签或<input />标签，具体取决于对type组件的输入。我希望按钮组件接受将呈现为按钮标签的内容子项。

为了说明：一个Angular模板，它调用我的button组件，如下所示：<button>Hello</button>应该在DOM中呈现为<a>Hello</a>。但是，如果设置了属性type="submit"（例如<button type="submit>Hello</button>），则DOM中的输出应为<input type="submit">Hello</input>。

为了进一步澄清，如果我使用React，我可以创建[这个过于简化的版本]：

const Button = ({ type, children }) =>
  type === "submit"
    ? <input type="submit">{children}</input>
    : <a>{children}</a>

我被困的地方

使用<ng-content />创建显示内容子项的Angular组件相对简单。但是，我无法在动态选择的代码中添加这些子代 - <a />或<input />，具体取决于type属性的值。< / p>

我尝试了什么

我最初尝试在<ng-content />或ngIf指令中使用ngSwitch，但发现<ng-content />最多只能出现一次在任何给定的模板中（除非它使用选择器限定）。但是，我想输出所有内容的子项，因此选择器没有帮助。

我一直在寻找对DynamicComponentLoader的引用，但这似乎已被弃用。

我见过ContentChildren装饰器，它允许我的按钮组件访问传递给它的子内容，但我不知道如何将这些子节点并将它们注入我的组件模板中。

我遇到了NgTemplateOutlet，这似乎可以帮助我在两个完全不同的模板之间切换（一个带有<a />标签，另一个带有<input />标签。然而，这被标记为“实验性”，我无法理解其用法。

非常感谢任何帮助!!

Answer 1

@Component({
  selector: 'adapting-button',
  template: `
      <a *ngIf="type !== "submit">{{value}}</a>
      <input *ngIf="type === "submit" type="submit" [value]="value">
  `,
})
export class AdaptingButtonComponent {
  @Input() type: any;
  @Input() value: any;
}


@Component({
  selector: 'app-root',
  templateUrl: `
    <adapting-button [type]="'submit'" [value]="Hello"></adapting-button>
  `,
})
export class AppComponent {
  title = 'app works!';
}

在动态父标记中包含内容子项

1 个答案: