Javascript 具有各种模板的角度组件上的部分手风琴样式动画

我正在制作一个具有卡片样式布局的生产应用程序每个过滤器（日期选择器等）和可视化工具（表格、图表）都包装在一个“卡片”组件中。甚至有两个子组件继承自该类

最后，这是一对卡片的外观，这样你就可以知道发生了什么：

如您所见，这些卡有3个部分：

• 标题
• 内部组件（放在ng内容中）
• 包含一些摘要信息的页脚

我们目前需要的是能够点击V形（卡头右侧的图标），并仅隐藏内部组件。这就是我想要达到的结果：

但我有一个问题，因为我如何设计这些卡。查看卡代码父类的外观：

@Component({
    selector: "card",
    styleUrls: ["./card.css"],
    template: `
    <div class="col card" [@animate]="enabled">
      <div class="row card-header">
        {{title}}
        <i (click)="switchVisibility()" class="fa fa-chevron-down icon-right"></i>
      </div>
      <div class="margin" [@animate2]="enabled">
      <ng-content></ng-content>

    </div>
    `

@组件({
选择器：“卡片”，
样式URL:[“/card.css”]，
模板：`
{{title}}
`

实施：

<card [title]="'DATE SELECT'" class="col">
      <date-picker-wrapper class="date-wrapper" [config]="config" [dateranges]="dateranges" [doubleDateRange]="false">
      </date-picker-wrapper>
</card>

您可能已经发现了其中一个问题：所有内部组件都插入到ng内容中，因此，如果我使用位于卡上的动画隐藏组件（这是一个想法，因此我可以在子卡类中继承此方法）…我也将隐藏页脚。这不是计划。

我想我需要在ng内容中包含上侧模板，以及另一个不同模板或其他东西中的页脚。但我不知道怎么做，关于ng模板的指南似乎不是很清楚。此外，我也不太确定实现此结果的最佳方法是什么

这是组件的页脚（在本例中为daterangepicker）的外观：

<div class="footer-component">
        <hr>
        <p class="footer-text">
            <span style="color:#ff8716;">
                {{ config?.daterange?.rangelabel ? config?.daterange?.rangelabel : "Custom" }}
            </span>
              &nbsp;|&nbsp;  
            {{ getFormattedDate(1, true) }} - {{ getFormattedDate(1, false) }} 
        </p>
        <button class="btn btn-relocator" (click)="openDate(datemodal)">Edit</button> 
</div>

{{config？.daterange？.rangelabel？config？.daterange？.rangelabel:“自定义”}
|   
{{getFormattedDate（1，true）}-{{getFormattedDate（1，false）}

编辑

我在这里看到的一个问题是，这个页脚实际上需要组件的一些功能，一些方法不是全局的，因此无法从组件外部访问

然后，我有几个问题：

• 我应该在我所有的组件中，在它们的模板中复制这个动画吗？这不是有点脏吗？如何填充V形图标单击到内部组件的状态

• 如果有办法在卡片组件中插入两个模板，您认为我如何从页脚模板访问组件的逻辑

• 关于我应该如何“隐藏”内容有什么评论吗？我有一个想法，用“*”高度来表示“自动”，但我不确定这是否有效

---

要隐藏，需要使用布尔切换变量。 在组件中，声明变量，如下所示：- enabledContent=false； 然后尝试修改html，如下所示：-

<div class="col card" [@animate]="enabled">
      <div class="row card-header">
        {{title}}
        <i (click)="enabledContent=!enabledContent;switchVisibility();" class="fa fa-chevron-down icon-right"></i>
      </div>
      <div class="margin" [@animate2]="enabledContent">
      <ng-content></ng-content>

    </div>

现在在您的组件中，按如下方式声明您的服务（仅显示示例代码）：-

然后在html文件中，使用如下服务方法（仅显示示例代码）：-

{{myservice.getFormattedDate（1，true）}-{{myservice.getFormattedDate（1，false）}

我尝试在html文件中使用service.ts中的变量，它工作正常，但我还没有测试从service.ts调用方法。希望它能工作。如果可以，那么您可以从任何地方调用您的服务方法，因为服务在角度上是全局的，只需要在要使用的组件中声明

public getFormattedDate(1, true): any {
 return result;
}

import { Component, OnInit,} from '@angular/core';
import { MyService} from './myservice.service'; 
@Component({   selector: ...   templateUrl: ...   styleUrls: ... }) 
export class MyComponent implements OnInit {

  constructor(private myservice: Myservice) { }

  ngOnInit() {   }

}

<div class="footer-component">    
{{ myservice.getFormattedDate(1, true) }} - {{ myservice.getFormattedDate(1, false) }} 
</div>