与功能请求相关的@angular/*包有哪些?
core
描述
有时,指令提供两个具有相似作用的输入,并且可以接收相同的值。在使用指令组合API时,如果单个输入可以Map到宿主指令的这两个相似的输入,那将是非常好的。
例如,我希望以下测试能够通过:
import { Component, Directive, Input } from '@angular/core';
import { TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
@Directive({
selector: '[hostDirective]',
standalone: true
})
class HostDirective{
@Input() i1?: string
@Input() i2?: string
}
@Directive({
selector: '[composedDirective]',
standalone: true,
hostDirectives: [
{
directive: HostDirective,
inputs: ['i1: i', 'i2: i']
}
]
})
class ComposedDirective{
}
@Component({
template: '<div composedDirective i="hello"></div>',
standalone: true,
imports: [ComposedDirective]
})
class TestComponent {}
describe('composition', () => {
it('should map a single input to two host inputs', () => {
const fixture = TestBed.createComponent(TestComponent);
fixture.detectChanges();
const hostDirective = fixture.debugElement.query(By.directive(HostDirective)).injector.get(HostDirective);
expect(hostDirective.i1).toBe('hello');
expect(hostDirective.i2).toBe('hello');
});
})
但它目前以以下错误失败:
Error: ASSERTION ERROR: Conflicting host directive input alias i2. [Expected=> i2 == i1 <=Actual]
如果有技术上支持这种场景的原因,至少改善错误信息将是一件好事,因为我觉得很难理解。
建议的解决方案
支持将组合指令的一个输入Map到宿主指令的多个输入。
每次组合指令输入发生变化(在上面的示例中为 i
)时,都会将宿主指令的Map输入(在上面的示例中为 i1
和 i2
)设置为输入的新值,并在宿主指令上执行带有 i1
和 i2
都列为已更改的 ngOnChanges
钩子。
考虑过的替代方案
保持原样不变,但改进文档以提及这个限制,并改进错误信息。
3条答案
按热度按时间noj0wjuj1#
@jnizet 这将允许我们拥有一个等效于多个绑定到一个属性的功能,这在当前的模板语法中是不支持的(出于好的原因 - 绑定值可能会冲突,很难决定选择哪一个)。
根据以上内容,我将关闭这个问题,但仍然对这个用例感到好奇 :-)
mepcadol2#
@pkozlowski-opensource
使用场景是创建一个可重用的typeahead指令,通过组合ng-bootstrap的typeahead。假设我想创建一个
userTypeahead
指令,允许通过组合ngbTypeahead
指令来搜索和选择用户。我仍然希望能够自定义typeahead中用户项的格式,但在结果和输入中始终以相同的方式格式化它们。ng-bootstrap的typeahead有一个
inputFormatter
输入和一个resultFormatter
输入。因此,我希望能够同时将这两个输入绑定到我的userTypeahead
指令的唯一输入formatter
:如果我向我的指令传递一个formatter
输入,它的值将填充resultFormatter
和inputFormatter
输入的值。ecfdbz9o3#
哦,所以我们可能误解了用例-它更多地是关于将一个输入引导到主机指令的2个不同输入吗?