角RC5 - 重写组件模板无法找到输入属性

IfNodeComponent：

@Component({ 
    template: '<se-dynamic-condition (questionLinkClicked)="onQuestionClicked" [condition]="node.condition"></se-dynamic-condition>', 
    selector: 'se-node-if' 
}) 
export class NodeIfComponent { 
    @Input() node: NodeProperties; 

    onQuestionClicked(event: IQuestionLinkClickEvent): void { 
     // do stuff 
    } 
}

和DynamicConditionComponent：

@Component({ 
    template: '<p>My original template</p>', 
    selector: 'se-dynamic-condition' 
}) 
export class DynamicConditionComponent { 
    @Input() condition: Condition; 
    @Output() questionLinkClicked = new EventEmitter<IQuestionLinkClickEvent>(); 
}

我写一个测试以检查[condition]绑定是否附加到节点模板中的组件。为此，我重写DynamicConditionComponent的模板以简化为{{condition | json}}。然后这允许我比较JSON并断言它与应该通过的条件相同。

在RC5之前我使用OverridingTestComponentBuilder来实现此目的。但是由于我刚刚升级到RC5，我正在重写该测试以代替使用TestBed。这不太好。下面是它的外观：

beforeEach(() => { 
    TestBed.configureTestingModule({ 
     declarations: [NodeIfComponent, DynamicConditionComponent] 
    }); 

    TestBed.overrideComponent(DynamicConditionComponent, { 
     set: { 
      template: '{{condition | json}}' 
     } 
    }); 

    fixture = TestBed.createComponent(NodeIfComponent); 
    component = fixture.componentInstance; 
    element = fixture.nativeElement; 

    component.node = {some:'data'}; 
    fixture.detectChanges(); 
}); 

it('should display a dynamic condition component and pass the condition to it',() => { 
    let dc = element.querySelectorAll('se-dynamic-condition'); 
    expect(dc.length).toEqual(1, 'Dynamic condition component is found'); 
    expect(dc[0].innerHTML).toEqual(JSON.stringify({some:'data'}, null, 2)); 
});

但是，运行这个测试失败，出现以下错误：

Can't bind to 'condition' since it isn't a known property of 'se-dynamic-condition'.

如果我不会覆盖DynamicConditionComponent的模板，然后我不明白错误，但可以理解我的测试失败。如果我从IfNode模板中删除属性绑定，那么我不会收到错误，但同样，测试会按预期失败。错误消息指向未在同一模块中注册的se-dynamic-condition组件。但它是，并且代码工作时我运行它。这只是测试问题，不管怎样都不使用模块定义。这就是TestBed.configureTestingModule声明的目的。

因此，覆盖模板似乎也失去了与组件相关的条件属性。

我在这里做了一些根本性的错误吗？例子我在其他地方看到重写模板工作正常，但我没有看到任何重写带有输入属性的模板（然后尝试为该属性赋值）。

任何帮助将不胜感激。

来源

2016-08-19 Maloric

能否请您添加component.html内容？ – Supamiu

好吧，我已经添加了整个IfNode组件，并将它与模板合并以获得清晰度 – Maloric

这是https://github.com/angular/angular/pull/10767

在RC5固定在RC6的错误现在作为一种解决方法重新指定的覆盖声明的输入。

使用

TestBed.overrideComponent(DynamicConditionComponent, { 
    set: { 
     template: '{{condition|json}}', 
     inputs: ['condition'], 
    } 
});

来源

2016-08-19 08:44:53 StocksR

感谢Robert。免责声明 - 罗伯特和我一起工作，但找到答案让代表。在这里为任何其他不幸的灵魂谁有同样的问题。 – Maloric

角RC5 - 重写组件模板无法找到输入属性

回答

相关问题