在 Angular 2 中，我们可以使用组件来定义页面中的一段可复用的代码。通常情况下，每个组件都有一个对应的模板文件来描述它的外观和行为。
但是，在某些情况下，我们希望能够动态地加载不同的模板文件，这可能是因为我们需要根据特定的条件或用户输入来决定要显示哪个模板。在这种情况下，我们可以使用 Angular 2 的动态模板 URL 功能来实现。
如何使用动态模板 URL
使用动态模板 URL 非常简单。我们只需要将组件中的 templateUrl 属性设置为一个返回字符串的函数即可。这个函数可以根据需要生成不同的模板 URL。
下面是一个示例组件，它会根据一个布尔值的值来显示不同的模板：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -------------------
------------ ---------------
--
------ ----- ----------- -
--------------------- - ------
---------------- -
-------------------------- - ----------------------------
-
-
-------- ---------------- -
------ -------------------------- - --------------------------- - --------------------------
-在上面的代码中，我们定义了一个名为 MyComponent 的组件，并将它的 templateUrl 属性设置为 getTemplateUrl 函数。这个函数会根据 showAlternateTemplate 属性的值来返回不同的模板 URL。
注意，我们将 getTemplateUrl 函数定义为组件类外部的普通函数。这是因为在组件类中使用箭头函数来定义动态模板 URL 会导致 this 指向错误。如果你需要在组件类中定义动态模板 URL，你应该使用普通函数并手动绑定 this。
动态模板 URL 的指导意义
动态模板 URL 是 Angular 2 中一个非常有用的特性，它可以让我们更加灵活地管理组件的模板。有了它，我们可以根据需要动态地加载不同的模板，从而使我们的应用程序更具交互性和可扩展性。
然而，我们需要注意的是，使用动态模板 URL 会增加代码的复杂度和维护成本。如果你的应用程序只需要使用一种模板，那么最好不要使用动态模板 URL。只有在必要时才使用它，以避免不必要的代码复杂度。
结论
Angular 2 的动态模板 URL 功能可以让我们更加灵活地管理组件的模板。通过设置 templateUrl 属性为一个返回字符串的函数，我们可以动态地加载不同的模板。然而，我们需要注意使用动态模板 URL 带来的代码复杂度和维护成本，只在必要时使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/25300