Question

我对angular2.in我的反应项目是新手，我的组件看起来像这样：

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的评论。你不需要一个@Input修饰值，如果你要做的就是像React一样传递“删除”这个词。您可以使用<ng-content>。

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

和

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

Answer 2

如果我理解正确，您希望组件中包含"delete"字符串作为text输入变量的一部分。

您的ts代码很好，只需更改html中组件的实现：

<button-default [delete]="'delete'"></button-default>

Answer 3

<强>组件

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

export class ButtonDefaultComponent {
   @Input("delete") private text: string
}

<强>索引

<button-default delete="delete"></button-default>

就是。

我如何使用像反应这样的ng2组件

3 个答案: