假设我正在创建一个典型的待办事项列表,其结构如下:
<ul>
<li>Item 1 - description for item 1</li>
<li>Item 2 - description for item 2</li>
<!-- ... -->
</ul>
我希望列表和项目尽可能地可重用,因此我可以将它们分成单独的组件:
@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>
@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
)时出现问题:
<mat-list>
<mat-list-item todo-list-item *ngFor="let item of items" [item]="item"></mat-list-item>
</mat-list>
{{ item.title }} - {{ item.description }}
上方的摘录不起作用。 mat-list-item
不接受item
,并且现在有两个与mat-list-item[todo-list-item]
相匹配的组件定义。
我可以这样:
<mat-list>
<todo-list-item *ngFor="let item of items" [item]="item"></todo-list-item>
</mat-list>
<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>
答案 0 :(得分:2)
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>
这样,应该隔离垫列表下的垫列表项