如何在angular 2 final中不只使用一个templateUrl ?

本文关键字：templateUrl 一个 angular final | 更新日期: 2023-09-27 18:13:32

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

我能不能用?我想拆分我的模板因为它很相似

如何在angular 2 final中不只使用一个templateUrl ?

基本上，由于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>

使您能够在两个视图之间共享一个表单。

注意:如果要在两个组件中使用共享形式的逻辑，则需要有一个中间服务来在组件之间传递不同的值。这里有一个很好的例子。

这可以应用于不同的事情，你需要记住的是你的代码的哪一部分应该被重用，然后使其成为一个组件。

不，你不能用它，因为…

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

您可以使用template。Angular2 Typescript允许编写多行模板，通过使用'字符来引用它们

相关文章：