Как разделить элементы списка на компоненты в угловых

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>

---

Я знаю, что могу объединить два компонента в один, однако каждыйиз списка элементов могут быть довольно сложными (с кнопками и дополнительной логикой), что я хотел бы, чтобы они были в отдельных компонентах.Каков обычный подход к этой проблеме?Многие из связанных с этим вопросов (таких как это и это ), которые я мог бы найти, предполагают, что используются нативные элементы, что здесь не так.В частности, как мне создать следующую структуру, используя два компонента, которые я могу определить сам?

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

todo-list-item.component. *

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

таким образом, он должен быть зарезервирован для элемента списка матов в списке матов