angular 指令组合:支持将一个输入Map到主机指令的两个不同输入

nkoocmlb  于 6个月前  发布在  Angular
关注(0)|答案(3)|浏览(60)

与功能请求相关的@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输入(在上面的示例中为 i1i2)设置为输入的新值,并在宿主指令上执行带有 i1i2 都列为已更改的 ngOnChanges 钩子。

考虑过的替代方案

保持原样不变,但改进文档以提及这个限制,并改进错误信息。

noj0wjuj

noj0wjuj1#

@jnizet 这将允许我们拥有一个等效于多个绑定到一个属性的功能,这在当前的模板语法中是不支持的(出于好的原因 - 绑定值可能会冲突,很难决定选择哪一个)。
根据以上内容,我将关闭这个问题,但仍然对这个用例感到好奇 :-)

mepcadol

mepcadol2#

@pkozlowski-opensource

使用场景是创建一个可重用的typeahead指令,通过组合ng-bootstrap的typeahead。假设我想创建一个userTypeahead指令,允许通过组合ngbTypeahead指令来搜索和选择用户。我仍然希望能够自定义typeahead中用户项的格式,但在结果和输入中始终以相同的方式格式化它们。

ng-bootstrap的typeahead有一个inputFormatter输入和一个resultFormatter输入。因此,我希望能够同时将这两个输入绑定到我的userTypeahead指令的唯一输入formatter:如果我向我的指令传递一个formatter输入,它的值将填充resultFormatterinputFormatter输入的值。

ecfdbz9o

ecfdbz9o3#

哦,所以我们可能误解了用例-它更多地是关于将一个输入引导到主机指令的2个不同输入吗?

相关问题