angular - Angular - 从特定组件实例获取数据，以便能够通过单击按钮与之交互

Question

我有一个状态框，它是它自己的组件。在我的应用程序中有多个此状态框组件的实例，如下图所示：

每个状态框的详细信息存储在浏览器本地存储中，并在提交表单时创建，传入的表单值保存到浏览器本地存储并显示在状态框组件上。

每个单独的状态框组件实例的详细信息都被视为地图数据结构。当第app.component一次初始化时，会为存储在浏览器本地存储中的每个详细信息创建一个映射，并将它们推送到一个名为 myConfigs 的数组中：

export class AppComponent implements OnInit, OnDestroy
{
  myConfigs: any[] = [];
  localStorageKeys: string[] = ['Test']
  constructor() {}
    
  ngOnInit(): void 
  {
    for (var key of this.localStorageKeys)
      for(let i = 1; i < 5; i++)
        if (localStorage.getItem(key+i) != null)
          this.myConfigs.push(new Map(JSON.parse(localStorage.getItem(key+i)!)))
        else
          console.log(key+i + ' currently not available');
  }
}

然后在app.component模板中，我们将 myConfigs 数组中的每个地图项作为单个配置进行循环，然后将其传递给指令 (appDynamicStatusBox)。

<app-header></app-header>
<div class='status-box-container'>
    <ng-container *ngFor="let config of myConfigs; let i=index" appDynamicStatusBox [config]="config"></ng-container>
</div>

在指令中，我们为每个状态框组件创建一个实例。myConfigs 中的配置项@Input在此指令中，从那里我们可以通过 resolveComponentFactory 创建每个状态框组件，然后使用传入的配置变量设置该组件实例中的每个值：

@Directive({selector: '[appDynamicStatusBox]'})

export class DynamicStatusBoxDirective implements OnInit
{
  @Input() config: any;
  componentRef!: ComponentRef<StatusBoxComponent>;

  constructor(private resolver: ComponentFactoryResolver, public viewContainerRef: ViewContainerRef) {}

  ngOnInit(): void 
  {
    const factory = this.resolver.resolveComponentFactory(StatusBoxComponent); // Retrieves the factory object that creates a component of the given type
    this.viewContainerRef.clear(); // clears the previous view
    this.componentRef = this.viewContainerRef.createComponent(factory); // Instantiates a single component of type StatusBoxComponent and inserts its host view into this container
    this.componentRef.instance.name = this.config.get('name')
    this.componentRef.instance.deviceId = this.config.get('device')
    this.componentRef.instance.cpuTemp = this.config.get('cpuTemp')
    this.componentRef.instance.diskUsage = this.config.get('diskSpace')
    this.componentRef.instance.systemUptime = this.config.get('uptime')
    this.componentRef.instance.systemTime = this.config.get('time')
    this.componentRef.instance.number = this.config.get('num')
    this.componentRef.instance.device = this.config.get('device')
    this.componentRef.instance.value = this.config.get('value')
  }
}

我想要做的是能够检索this.componentRef.instance.deviceId存储在本地存储中的密钥，该密钥保存特定状态框组件的数据，并且能够按删除按钮删除本地存储，从而删除组件实例。

但我不确定如何this.componentRef.instance.deviceId通过单击/选择特定状态框组件的红色删除按钮来获取值。

如果有人可以提供帮助，将不胜感激。

标签： angularlocal-storageangular-directiveangular-componentsangular-resolver

Answer 1

我会这样做：

• 创建状态服务
• 创建时在每个组件中注入 StatusService（注意绑定父级和子级的注入器）
• 声明一个

private deleteSubject = new Subject<boolean>();
public delete$ = this.deleteSubject.asObservable()

public delete(checkboxId: string){
    this.deleteSubject.next(checkboxId);
}

• 从您只需调用的组件中delete
• 从父母那里，您只需要听就delete$知道要删除哪个复选框。

更进一步，您可以完全管理服务中的复选框，并使您的父组件更加愚蠢:)

---

另一种方法是在您的指令上创建一个 Output()。并将其绑定到复选框中完全相同的 Output()

this.componentRef.instance.delete = this.delete