如何将输入值传递给动态角分量
如何将输入值传递给动态角分量
提问于 2019-10-11 16:10:42
背景:我正在尝试创建一个动态筛选器，用户可以在其中指定多个属性和相应的属性值来筛选组件列表。动态添加的组件包括两个下拉列表；一个用于属性选择，另一个用于属性值，另一个按钮用于动态添加下一个属性筛选器组件。属性列表由选定的目录筛选，该目录通过@Input传递。这些作品看起来是这样的：
在父HTML文档中，包含属性筛选器容器。
<app-attribute-filter-container [catalogSelected]="catalog" ></app-attribute-filter-container> 属性筛选器容器当前由带有动态占位符的ng模板组成。
<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值永远不会进入动态注入的组件。这将导致属性下拉的值永远不会被加载。
回答 1
Stack Overflow用户
发布于 2019-10-11 16:42:57
如果说动态，你指的是entryComponents。所以你不能把输入传递给他们。相反，您可以使用双向服务通信来传递数据。
https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58345001
复制相关文章
相似问题
腾讯云开发者
