javascript - 使用 Angular 2 将内容子项包装在动态父标记中

Question

我想做什么

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

举例说明:调用我的 button 的 Angular 模板像这样的组件:<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>

我卡在哪里

使用 <ng-content /> 创建一个显示子内容的 Angular 组件相对简单。但是，我还无法在动态选择的标签 中呈现这些子项 - <a />或 <input />取决于 type 的值属性(property)。

我尝试过的

我最初尝试使用 <ng-content />在 ngIf 里面或 ngSwitch指令，才发现 <ng-content />在任何给定模板中最多可以出现一次(除非它被选择器限定)。但是，我想输出所有 子内容，所以选择器没有帮助。

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

我看过 ContentChildren装饰器，它允许我的按钮组件访问传递给它的内容子项，但我不确定如何获取这些子项并将它们注入(inject)我的组件模板。

我遇到了 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!';
}