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

Question

我想做的事

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

为了说明:一个Angular模板,它调用我的button组件,如下所示:<button>Hello</button>应该像<a>Hello</a>在DOM中一样呈现.但是,如果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>

我被困在哪里

创建显示子项使用内容的Angular组件<ng-content />相对简单.但是,我还无法在动态选择的标记内渲染这些子项- <a />或者<input />取决于type属性的值.

我试过的

我最初尝试<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!';
}