我有 2 个不同的组件,我在其中使用 Angular - Expansion Panel 来实现可扩展的摘要 View 。
我可以集成 <mat-expansion-panel>
到单个组件成功。
我需要帮助制作 Component2.html
作为 Component1.html
的父级(在展开中展开 - 请参见下图)
Component 1 is expanded it can show its data and display remaining Child components
注意 - 两个组件都有 兄弟关系 ,
no parent child
或 child - parent
组件1.html <div class="row">
<div class>
<dl class="row property_set" data-property-set-name="data">
<mat-accordion>
<mat-expansion-panel (opened)="doExpand = true"
(closed)="doExpand = false">
<mat-expansion-panel-header>
<mat-panel-title>
<dt class="col-sm-4 record_property">data</dt>
</mat-panel-title>
<mat-panel-description>
<dd class="col-sm-8 record_property_value data_name" id="{{genId(data.name)}}">
<inline-misal-edit
[(field)]="data.name" [elementType]="a.bName" (fieldChange)="dataModified(data)"
cols="30" rows="1"></inline-misal-edit>
</dd>
</mat-panel-description>
</mat-expansion-panel-header>
<dt class="col-sm-4 record_property">news</dt>
<dd class="col-sm-8 record_property_value">{{data.news?.created | news}}</dd>
</mat-expansion-panel>
</mat-accordion>
</dl>
</div>
组件2.html
<dl class="row property_set" data-property-set-name="misal">
<mat-accordion>
<mat-expansion-panel (opened)="doExpand = true"
(closed)="doExpand = false">
<mat-expansion-panel-header>
<mat-panel-title>
misal Id
</mat-panel-title>
<mat-panel-description>
<dd class="col-sm-10 record_property_value" data-property-type="select">{{misal.id || 'new'}}</dd>
</mat-panel-description>
</mat-expansion-panel-header>
<dd class="col-sm-10 record_property_value misal_name">{{misal.data[0].name}}</dd>
<dt class="col-sm-2 record_property">Country Pass</dt>
<dt class="col-sm-2 record_property">Plugins Program</dt>
<dd class="col-sm-10 record_property_value">
<north-dhamma[(misal)]="misal" [editMode]="editMode" (misalChange)="recordModified.emit()"></registry-number>
</dd>
<dt *ngIf="misal.value === 'hovered'" class="col-sm-2 record_property">Related Plugins Program</dt>
<dd *ngIf="misal.value === 'hovered'" class="col-sm-10 record_property_value">
<land-hole></land-hole>
</dd>
</mat-expansion-panel>
</mat-accordion>
</dl>
.ts 文件 panelOpenState = true;
更新 Robbie 下面给出的答案适用于
parent - child component relation
但不适用于 sibling component
最佳答案
一种方法是使用共享服务 - https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service
但是我发现以下解决方案更简单,它允许在 2 个 sibling 之间共享数据。
app-sibling2.component.ts
import { AppSibling1Component } from '../app-sibling1/app-sibling1.component';
export class AppSibling2Component {
@Input() data: AppSibling1Component;
...
}
在您的父组件模板中:<!-- Assigns "AppSibling1Component" instance to variable "data" -->
<app-sibling1 #data></app-sibling1>
<!-- Passes the variable "data" to AppSibling2Component instance -->
<app-sibling2 [data]="data"></app-sibling2>
我相信这就是你正在寻找的。如果您有任何问题,请告诉我
关于angular - 在组件之间展开/折叠功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67220107/