angular 插槽传参

Angular中的插槽（Slot）概念并不像Vue或Web Components中的那样直接存在。不过，在Angular中可以通过Content Projection的方式来实现类似插槽的功能，即允许开发者指定一个位置，让父组件可以在其中插入子组件或者内容。

在Angular中，Content Projection通常是通过使用`<ng-content>`标签来实现的。开发者可以指定一个投影的选择器，从而可以将内容投影到特定的元素上。使用`select`属性可以在`<ng-content>`标签内指定选择器，这样就只有匹配该选择器的元素才会被投影到这个位置。

在Angular 6及以后的版本中，可以使用`@ContentChild`和`@ContentChildren`装饰器来获取投影内容，并且可以通过`ngAfterContentInit`生命周期钩子来接收参数。

下面是一个简单的例子来说明如何在Angular中使用Content Projection和传参：

1. 创建一个组件，定义一个插槽，使用`<ng-content>`标签并指定一个选择器：

// my-slot.component.ts
import { Component, Input, ContentChildren, AfterContentInit, QueryList } from '@angular/core';

@Component({
  selector: 'app-my-slot',
  template: `
    <ng-content select="[appSlot]"></ng-content>
  `,
})
export class MySlotComponent implements AfterContentInit {
  @ContentChildren('appSlot', { read: Input }) private content: QueryList<any>;

  ngAfterContentInit() {
    if (this.content.length > 0) {
      const projectedContent = this.content.first;
      // 在这里，你可以通过projectedContent获取传入插槽的参数
    }
  }
}

2. 在父组件的模板中使用这个带有插槽的组件，并传递参数：

<!-- parent.component.html -->
<app-my-slot>
  <div appSlot let-param="value">
    <!-- 这里可以使用投影内容，并通过let-语法传递参数 -->
    {{param}}
  </div>
</app-my-slot>

在这个例子中，我们在父组件的模板中创建了一个`div`元素，并通过`appSlot`指令告诉Angular它应该被投影到`MySlotComponent`中的`<ng-content select="[appSlot]"></ng-content>`指定的位置。我们还使用了`let-param="value"`语法来传递参数给插槽内容。