如何将列表项分离为角中的组件

Question

假设我正在创建一个典型的待办事项列表，其结构如下：

<ul>
    <li>Item 1 - description for item 1</li>
    <li>Item 2 - description for item 2</li>
    <!-- ... -->
</ul>

我希望列表和项目尽可能可重用，这样我就可以将它们分成不同的组件：

Todo-list.Component*

@Component({
    selector: "todo-list",
    templateUrl: "todo-list.component.html"
})
export class TodoListComponent { /* ... */ }

<ul>
    <li todo-list-item *ngFor="let item of items" [item]="item"></li>
</ul>

todo-列表-项目。组件。*

@Component({
    selector: "li[todo-list-item]",
    templateUrl: "todo-list-item.component.html"
})
export class TodoListItemComponent { /* ... */ }

{{ item.title }} - {{ item.description }}

到目前为止，只要我坚持使用本地的HTML元素(如ul和li )，一切都会正常工作。

然而，当我尝试使用角组件而不是本机元素(如mat-list和mat-list-item )时，就会出现一个问题。

Todo-list.Component*

<mat-list>
    <mat-list-item todo-list-item *ngFor="let item of items" [item]="item"></mat-list-item>
</mat-list>

todo-列表-项目。组件。*

{{ item.title }} - {{ item.description }}

上面的代码片段无法运行。mat-list-item不接受item，现在还有两个与mat-list-item[todo-list-item]匹配的组件定义。

我可以这样做：

Todo-list.Component*

<mat-list>
    <todo-list-item *ngFor="let item of items" [item]="item"></todo-list-item>
</mat-list>

todo-列表-项目。组件。*

<mat-list-item>
    {{ item.title }} - {{ item.description }}
</mat-list-item>

但是，现在结构不正确，不会产生正确的样式：

<mat-list>
    <todo-list-item>
        <mat-list-item>Item 1 - description for item 1</mat-list-item>
    </todo-list-item>
    <todo-list-item>
        <mat-list-item>Item 2 - description for item 2</mat-list-item>
    </todo-list-item>
</mat-list>

mat-list-item应该直接在mat-list下面

<mat-list>
    <mat-list-item>Item 1 - description for item 1</mat-list-item>
    <mat-list-item>Item 2 - description for item 2</mat-list-item>
</mat-list>

我知道我可以将这两个组件组合成一个单独的组件，但是每个列表项都可能相当复杂(带有按钮和附加逻辑)，我希望它们位于单独的组件中。解决这个问题的通常方法是什么？我可以找到许多相关的问题(如this和this)，假设使用了本机元素，这里不是这样的。具体来说，如何使用我可以自己定义的两个组件创建以下结构？

<todo-list>
    <mat-list>
        <mat-list-item>Item 1 - description for item 1</mat-list-item>
        <mat-list-item>Item 2 - description for item 2</mat-list-item>
    </mat-list>
</todo-list>

Answer 1

Todo-list.Component*

<mat-list>
    <todo-list-item *ngFor="let item of items" [item]="item"></todo-list-item>
</mat-list>

todo-列表-项目。组件。*

<mat-list-item>
    {{ item.title }} - {{ item.description }}
</mat-list-item>

你的例子看起来很有希望

但是你试过了吗

<mat-list>
   <mat-list-item *ngFor="let item of items" >
     <todo-list-item [item]></todo-list-item>
   </mat-list-item>
</mat-list>

todo-列表-项目。组件。*

    <p>{{ item.title }} - {{ item.description }}</p>

那样的话，就应该把垫子清单上的物品隔离在垫子清单上。