输入值如何传递给动态 Angular 组件答案

【问题标题】：How are input values passed to dynamic Angular component输入值如何传递给动态 Angular 组件
【发布时间】：2019-10-11 16:10:42
【问题描述】：

背景：我正在尝试创建一个动态过滤器，用户可以在其中指定多个属性和相应的属性值来过滤组件列表。动态添加的组件由 2 个下拉列表组成；一个用于属性选择，另一个用于属性值和一个添加按钮，用于动态添加下一个属性过滤器组件。属性列表由通过@Input 传递的选定目录过滤。这些碎片看起来像这样：

在父 HTML 文档中，包含属性过滤器容器。

<app-attribute-filter-container [catalogSelected]="catalog" ></app-attribute-filter-container>

属性过滤器容器目前由一个带有动态占位符的 ng-template 组成

<ng-template #dynamic></ng-template>

容器对应的打字稿：

import { Component, NgModule, Inject, OnInit, ViewChild, ViewContainerRef, Input } from '@angular/core';
import { AttributeFilterCreatorService } from '../../services/attribute-filter-creator.service';
import { Catalog } from '../../interfaces/interfaces';

@Component({
  selector: 'app-attribute-filter-container',
  templateUrl: './attribute-filter-container.component.html',
  styleUrls: ['./attribute-filter-container.component.css'],
  providers: [AttributeFilterCreatorService]
})

export class AttributeFilterContainerComponent {
  @Input() catalogSelected: Catalog;
  service: AttributeFilterCreatorService;

  @ViewChild('dynamic', {
    read: ViewContainerRef
  }) viewContainerRef: ViewContainerRef

  constructor(@Inject(AttributeFilterCreatorService) service) {
    this.service = service;
  }

  ngOnInit() {
    console.log('Container Catalog: ', this.catalogSelected);
    this.service.setRootViewContainerRef(this.viewContainerRef);
    this.service.addDynamicComponent();
  }

}

最后，属性过滤器组件的打字稿：

import { Component, OnInit, ViewEncapsulation, Input, Inject } from '@angular/core';
import { Attribute, AttributeValue, Catalog } from '../../interfaces/interfaces';
import { HttpClient, HttpHeaders, HttpRequest, HttpEventType } from '@angular/common/http';
import { Router } from '@angular/router';
import { AuthService } from '../../services/auth.service';

@Component({
  selector: 'app-attribute-filter',
  templateUrl: './attribute-filter.component.html',
  styleUrls: ['./attribute-filter.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class AttributeFilterComponent implements OnInit {
  @Input() catalogSelected: Catalog;
  @Input() attributes: Attribute[];
  attributeValues: AttributeValue[];
  urlBase: string = "";
  selectedAttribute: Attribute;

  constructor(private auth: AuthService, private http: HttpClient, private router: Router, @Inject('BASE_URL') baseUrl: string) {
    this.urlBase = baseUrl;
  }

  ngOnInit() {
    if (!this.attributes) {
      this.LoadAttributes();
    }
  }

  attributeSelect(selectedAttribute) {
    this.LoadAttributeValues(selectedAttribute.id);
  }

  private LoadAttributes() {
    var attUrl = this.urlBase + 'api/Attribute/Attributes/' + this.catalogSelected.catalogcode;

    console.log("LOAD ATTRIBUTES", attUrl);

    this.http.get<Attribute[]>(attUrl).subscribe(result => {
      if (result.length == 0) {
        this.auth.logout();
        this.router.navigate(["login"]);
      }
      else {
        this.attributes = result;
      }

    }, error => console.error(error));
  }

  private LoadAttributeValues(attributeid) {
    this.attributeValues = [];

    var attValUrl = this.urlBase + 'api/Attribute/AttributeValues/' + this.catalogSelected.catalogcode + '/' + attributeid;

    this.http.get<AttributeValue[]>(attValUrl).subscribe(result => {
      if (result.length == 0) {
        this.auth.logout();
        this.router.navigate(["login"]);
      }
      else {
        this.attributeValues = result;
      }

    }, error => console.error(error));
  }

}

catalogSelected 值永远不会进入动态注入的组件。这会导致属性下拉列表的值永远不会被加载。

【问题讨论】：

标签： angular typescript

【解决方案1】：

如果你所说的动态是 entryComponents。所以你不能将输入传递给他们。相反，您可以使用双向服务通信来传递数据。

https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service

【讨论】：

是的，entryComponents。
你不能传递输入。按照我给的链接。