如何在angular中實現自己的“自定義組件”列表

Question

我定義了一個自定義元素“我的按鈕”。 此按鈕的類型可以自動設置該按鈕的圖標和文本。 例如

<my-button buttontype="add"></my-button>
<my-button buttontype="delete"></my-button>

...

到目前為止，還可以。

現在，我要實現第二個自定義元素“ my-menubar”，其中應包括“ my-button”列表

例如

<my-menubar>
<my-buttons>
<my-button buttontype="add"></my-button>
<my-button buttontype="delete"></my-button>
/my-buttons>
</my-menubar>

我的問題是，我該怎么辦？

Answer 1

您需要內容投影。 這是您如何實現的

@Component({
  selector: 'my-menubar',
  template: `
     <ng-content select="[my-buttons]"></ng-content>
  `
})
export class MyMenubarComponent {

}

您可以按以下方式使用它

<my-menubar>
  <div my-buttons>
    <my-button buttontype="add"></my-button>
    <my-button buttontype="delete"></my-button>
  </div>
</my-menubar>

我選擇[my-buttons]作為屬性，否則您將不得不使用選擇器my-buttons創建一個組件

如果要按以下方式使用組件

<my-menubar>
  <my-buttons>
    <my-button buttontype="add"></my-button>
    <my-button buttontype="delete"></my-button>
  </my-buttons>
</my-menubar>

您將需要創建另一個組件，如下所示

@Component({
  selector: 'my-buttons',
  template: `
     <ng-content></ng-content>
  `
})
export class MyButtonsComponent {}