javascript - 我如何使用像 React 这样的 ng2 组件

Question

我是 angular2 的新手。在我的 React 项目中，我的组件如下所示:

export const DefaultButton = (props: Props) => {
  return <button {...props}>{props.children}</button>
}

<DefaultButton>delete</DefaultButton>

ng2:

@Component({
    selector: "button-default",
    template`<button>{{text}}</button>`,
    styleUrls: ["./default.css"]
})
export class ButtonDefaultComponent {
    @Input() private text: string
}

我可以像这样使用ng2吗？

<button-default>delete</button-default>

Answer 1

其他两个答案很接近，但我认为你想要的是@yurzui 的评论。如果您想要做的只是像 React 中那样传递“删除”一词，那么您不需要 @Input 装饰值。您可以使用 <ng-content> .

@Component({
  selector: "button-default",
  template: '
  <button>
    <ng-content></ng-content>
  </button>
  ',
  styleUrls: ["./default.css"]
})
export class ButtonDefaultComponent { }

和

<button-default> Delete </button-default>