javascript - 如何在 Angular 中将列表项分离为组件

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-list-item.component.*

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

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

---

到目前为止，只要我坚持使用原生 HTML 元素(例如 ul 和 li)，一切都会正常进行。

但是，当我尝试使用 Angular 组件而不是原生元素(例如 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-list-item.component.*

{{ 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-list-item.component.*

<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

tod​​o-list.component.*

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

tod​​o-list-item.component.*

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

tod​​o-list-item.component.*

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

这样它应该被隔离在 mat list 下的 mat list item