如何创建一个通用组件以供其他组件重用答案

【问题标题】：How to create a generic component to be reused by other components如何创建一个通用组件以供其他组件重用
【发布时间】：2021-06-28 13:14:03
【问题描述】：

所以我有这个组件，它用于显示一个 div 滑入页面，并使用另一个组件提供的模板

@Component({
  selector: 'app-slide-in',
  templateUrl: './slide-in.component.html',
  styleUrls: ['./slide-in.component.less'],
  animations: [
    trigger('widthGrow', [
      state('closed', style({ transform: 'translateX(-100%)' })),
      state('open', style({ transform: 'translateX(0%)' })),
      transition('* => *', animate(250))
    ]),
  ]
})
export class SlideInComponent implements OnInit {
  @Input() header: string;
  @Input() template: TemplateRef<any>;

  state = "closed";

  constructor() { }

  ngOnInit(): void {
  }

  changeState(): void {
    (this.state == "closed") ? this.state = "open" : this.state = "closed";
  }
}

我想做的是来自另一个组件，我有一个像这样的 ng 模板

<button (click)="Open()">Open</button>
<ng-template #filters>
  ...
</ng-template>

当用户点击打开时，能够在其他组件中传递这个模板

export class Component2Component implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

  Open(): void {
  var slideInComp = new SlideInComponent();
  slideInComp.changeState();
  }
}

这样的最佳设计是什么？我想在其他组件中重用它，但传入不同的模板

【问题讨论】：

标签： angular angular-components

【解决方案1】：

我不确定我是否完全理解了您的问题。如果您只想创建一个可重复使用的动画，我建议您应该只为此目的使用指令。

如果您希望在SlideInComponent 中显示您拥有的ng-template，那么您可能应该这样做：

<button (click)="Open(slideInComponentRef)">Open</button>
<app-slide-in #slideInComponentRef [template]="filters" />
<ng-template #filters>
  ...
</ng-template>

在你的父组件中

export class Component2Component implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

  Open(slideInComponentRef: SlideInComponent): void {
  slideInComponentRef.changeState();
  }
}

或者，更好的方法是在您的SlideInComponent 中使用<ng-content> 并使用如下模板：

<div>
 <ng-content></ng-content>
</div>

然后您将不再需要@Input() template，您可以像使用它一样使用它

<app-slide-in #slideInComponentRef>
....
html template code goes here
....
</app-slide-in>

【讨论】：