具有各种模板的 Angular 组件上的部分 accordion-style 动画

Question

我正在制作一个具有 card-style 布局的生产应用。 每个过滤器（日期选择器等）和可视化工具（table、图表）都包含在一个 "Card" 组件中。 甚至有两个 child 组件继承自此 class.

所以最后，这就是一对卡片的样子，所以你可以了解发生了什么：

如您所见，卡片分为 3 个部分：

一个header
一个内部组件（放在ng-content里面）
带有一些摘要信息的页脚

我们目前的要求是能够单击人字形（卡片中的那个图标 header 右侧），并仅隐藏内部组件 .这是我想要达到的结果：

但我对此有疑问，因为我设计这些卡片的方式。看卡码parentclass长什么样：

@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>
    `

实施：

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

您可能已经发现这里的问题之一：所有内部组件都插入到 ng-content 中，因此，如果我使用位于 Card 的动画隐藏组件（这就是想法，所以我可以在 child 卡 classes 中继承这个方法）...我也会隐藏页脚。 这不是计划。

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

这是组件页脚的外观，在本例中为 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>

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

那么，我有几个问题：

我是否应该在所有组件的模板中复制此动画？会不会有点脏？您如何将 V 形图标的状态填充到内部组件？
如果有办法在 Card 组件中插入两个模板，你认为我如何从页脚模板访问组件的逻辑？
关于我应该如何 "hide" 内容有什么意见吗？对于 "auto"，我有一个使用“*”高度的想法，但我不确定这是否有效。

Answer 1

要隐藏，您需要使用布尔切换变量。在您的组件中，如下声明变量：- 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>

因为我不知道 [@anumate2]，在示例 link 中它是 [hidden] .

要启用全局方法，您可以通过执行以下步骤来实现：-

首先创建一个服务， myservice.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() {   }

}

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

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

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

具有各种模板的 Angular 组件上的部分 accordion-style 动画

Partial accordion-style animation on Angular component with various templates

javascript

angular

angular-animations