Question

在AngularJS中，我可以使用指令+模板来拆分具有多个标签的巨大HTML文件，每个标签的HTML均以自己的HTML格式存在，然后根据某些ng-show条件将其动态加载到主HTML中。

AngularJS代码就是这样


directive('generalsettingstab', () => {
   return {
     template: tabGeneralSettingsTemplate
   }
 })
 .directive('connectionsettingstab', () => {
   return {
     template: tabConnectionSettingsTemplate
   }
 })
 .directive('emailmessagetab', () => {
   return {
     template: tabEmailMessageTemplate
   }
 })

<uib-tab heading="General Settings" ng-show="$ctrl.shouldTabBeVisible('generalsettingstab');">

<generalsettingstab></generalsettingstab>

</uib-tab>

<uib-tab heading="Connection Settings" ng-show="$ctrl.shouldTabBeVisible('connectionsettingstab');">

<connectionsettingstab></connectionsettingstab>

</uib-tab>

<uib-tab heading="Email Message" ng-show="$ctrl.shouldTabBeVisible('emailmessagetab');">

<emailmessagetab></emailmessagetab>

</uib-tab>

这样，每个不同的TAB html文件都将使用相同的JS控制器。这是一个很好的机制，可以将较大的HTML分成较小的部分，然后在运行时重新组合UI。

我正在尝试在Angular（6/7）中实现类似的功能，但是我目前的困难是模板参数已从Angular @Directive中删除，因此无法立即在Angular中复制AngularJS中可能的功能。我还尝试使用带有其自己模板的单独的（虚拟/浅色）@Component，但这不起作用，因为当在选项卡的HTML之一中尝试访问TypeScript函数时，出现错误“未定义函数”（因为每个组件将获得自己的单独控制器-我的意图是对所有标签使用通用控制器。

我相信angular-ng-template-ng-container-ngtemplateoutlet可能会实现某些功能，但与AngularJS的初始解决方案相比，这一切似乎太复杂了。

在新的Angular中，最简单/最直接的方法是将大型HTML拆分为较小的单独模板文件，然后可以在运行时对其进行重构？（所有HTML大/父组件UI组件的一部分）。我认为在Angular中应该有一个简单的解决方案，因为这是将大UI拆分成较小的HTML文件的常见要求。

P.S：在Angular 6/7中，单个标签的HTML就是使用像这样的原始加载器加载的

从'！raw-loader！./ templates / tab-general-settings.html'导入*作为tabGeneralSettingsTemplate;

Answer 1

我知道您希望保留相同的思维模型并匹配功能...但是有时候，由于AngularJS-> Angular的工作方式不同，这变得很困难。

话虽如此，我建议为每个选项卡构建一个单独的组件。我有一个例子可以提供帮助。

然后您可以路由到每个选项卡的组件以显示该选项卡。

关于共享“控制器”，请考虑构建具有通用功能的服务。然后，每个“标签”组件都可以访问此共享服务以访问共享数据或功能。

这可能不是easiest方法，但可能是solid方法。

Answer 2

感谢@DeborahK作为一种可能的选择/替代，我会牢记这一点。

与此同时，在单个选项卡的HTML代码上，我设法使用 class TabGeneralSettingsComponent 扩展ConfigurationComponent {}

来“重用”主要ConfigurationComponent函数（代码）。

现在，仅在原型设计阶段似乎可以正常工作，但是随着应用程序的增长，我可能会遇到这种方法的一些问题。可能每个选项卡都会创建ConfigurationComponent的单独对象实例，这不是我想要的，并且可能会产生一些性能问题（甚至是奇怪的错误）-我会一直关注这一方面。

所以，如果其他人感兴趣，这就是当前的方法。

import * as tabGeneralSettingsTemplate from '!raw-loader!./templates/tab-general-settings.html';

@Component({
  selector: 'generalsettingstab',
  template: tabGeneralSettingsTemplate
})
class TabGeneralSettingsComponent extends ConfigurationComponent {}

在Angular中实现的最简单方法是在带有指令+模板的AngularJS中可能实现什么？

2 个答案: