我如何在angular 2 final中使用templateUrl多個

Question

@Component({
selector: 'food-form',
templateUrl : './app/form.html',
templateUrl : './app/form2.html'        
})

我可以使用嗎？ 我想拆分模板，因為它很相似。

Answer 1

基本上，由於Javascript對象字面量的概念，您不能在一個組件中多次使用templateUrl ，這種情況下，您需要做的是創建另一個包含共享表單的組件，然后分別創建component1和component2組件，需要添加您創建的共享格式指令。 需要共享服務以及能夠與兩個組件進行通信。

換句話說，就是這樣

@Component({
selector: 'shared-form',
templateUrl : './app/shared-form.html',     
})

@Component({
selector: 'food-form',
templateUrl : './app/form.html',
})


@Component({
selector: 'food-form2',
templateUrl : './app/form2.html',
})

然后在form2.html和form1.html模板中都可以使用

<shared-form></shared-form>

這樣一來，您就可以在兩個視圖之間使用一種共享形式。

注意：如果兩個組件都應使用共享形式的邏輯，則您需要一個中間服務來在組件之間傳遞不同的值。 有一個很好的例子在這里 。

這可能適用於不同的事情，您需要記住的是代碼的哪一部分應該可重用，然后再將該組件作為組件。

Answer 2

不，您不能使用它，因為..

[ts] An object literal cannot have multiple properties with the same name in strict mode.

您可以使用template 。 Angular2 Typescript允許通過使用`字符對多行模板進行引用來編寫它們。