角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 - 重寫組件模板無法找到輸入屬性

回答

相關問題