Question

我定义了一个自定义元素“ my-button”。此按钮的类型可以自动设置该按钮的图标和文本。例如。

<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 {}

如何在angular中实现自己的“自定义组件”列表

1 个答案: