Angular利用内容投射向组件输入ngForOf模板的方法

在现代Web开发中，Angular框架因其强大的功能和易用性而受到广泛关注。本文将详细介绍如何使用Angular的内容投射功能，向组件输入ngForOf模板，并以一个展示小狗狗列表的组件为例，分享给大家。

我们创建一个名为puppiesListCmp的组件，用于显示小狗狗的列表。这个组件的模板部分，我们采用ngFor指令来遍历小狗数组，并展示每只小狗的name、age和color。

组件代码示例（puppies-listponent.ts）：

```typescript

import { Component } from '@angular/core';

interface Puppy {

name: string;

age: number;

color: string;

}

@Component({

selector: 'puppies-list',

template: `

`

})

export class PuppiesListComponent {

@Input() puppies: Puppy[];

}

```

接下来，我们在父组件中使用这个puppiesListCmp组件，并传入一个包含两只小狗狗的数组。

代码示例（appponent.ts）：

```typescript

import { Component } from '@angular/core';

@Component({

selector: 'my-app',

template: `

`

})

export class AppComponent {

puppies = [

{ name: 'sam', age: 0.6, color: 'yellow' },

{ name: 'bingo', age: 1.5, color: 'black' }

];

}

```

现在，我们希望能够满足更灵活的需求，比如允许用户自定义模板，在数据不变的情况下只显示小狗狗的name和color。为了实现这一功能，我们可以利用Angular的内容投射机制。我们将组件模板中的部分代码提取出来，作为可替换的模板。这样，用户就可以根据需要自定义模板内容。具体实现如下：

在puppiesListCmp组件的模板中，使用``标签包裹需要自定义的部分，并通过`ngFor`指令遍历小狗数组。这样，外部定义的自定义模板就可以通过内容投射的方式投射到组件内部。代码示例：

修改后的模板（puppies-listponent.ts）：

```html