我該如何使用ng2組件般的反應

Question

我是react2的新手，在我的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>

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>

那是。