Question

在组件之间切换

我们有两个组件<hello></hello>和<goodbye></goodbye>。这两个组件都具有转换功能，允许它们以<hello>World</hello>或<goodbye>World</goodbye>等方式使用。

angular
  .module('myApp', [])
  .component('hello', {
    template: '<h1>Hello, <ng-transclude></ng-transclude>!</h1>',
    transclude: true
  })
  .component('goodbye', {
    template: '<h1>Goodbye, <ng-transclude></ng-transclude>!</h1>',
    transclude: true
  });

现在，我们希望能够在使用<hello></hello>组件或<goodbye></goodbye>之间切换。可以这样做的一种方法是使用ng-if。 (Fiddle)

的script.js

...
.controller('MyController', ['$scope', function($scope) {
  $scope.component = 'hello';
}]);

的index.html

<div ng-controller="MyController">
    <hello ng-if="component === 'hello'">World</hello>
    <goodbye ng-if="component === 'goodbye'">World</goodbye>
</div>

重复代码问题

然而，如果我们的翻译包括更多的行，怎么办？我们可能只有<hello>World</hello>，而不仅仅是<hello></hello>。如果我们使用相同的方法来做到这一点，我们最终会得到很多重复的代码。因此，如果我们可以简单地“切换”组件，那就太好了。 (Fiddle)

<div ng-controller="MyController">
    <hello ng-if="component === 'hello'">
    <goodbye ng-if="component === 'goodbye'">
    Lorem Ipsum.........
    </goodbye>
    </hello>
</div>

不幸的是，这不符合预期。设置$scope.component = 'hello'会产生Hello, !，设置$scope.component = 'goodbye'会产生空白页面。我对此行为的解释是angularjs将其解析为嵌套在<goodbye></goodbye>内的<hello></hello>，而不是在使用<hello></hello>或<goodbye></goodbye>之间切换。期望的行为更像是 if-else if 语句。

我也尝试过使用ng-switch on。 (Fiddle)

<div ng-controller="MyController">
  <div ng-switch on="component">
    <hello ng-switch-when="hello">
    <goodbye ng-switch-when="goodbye">
    Lorem Ipsum.........
    </goodbye>
    </hello>
  </div>
</div>

但是，这会产生多指令资源争用错误。

错误：$ compile：multidir

多指令资源争用

Multiple directives [ngSwitchWhen, hello] asking for transclusion on: <hello ng-switch-when="hello">

类似问题

问题Using ng-transclude inside ng-switch中，Github Issue声称修复了类似的错误。但是，此修复仅适用于ng-transclude嵌套在<div></div>块中的情况，如下所示：

<div ng-controller="MyController">
  <div ng-switch on="component">
    <div ng-switch-when="hello">
      <hello>Lorem Ipsum.........</hello>
    </div>
    <div ng-switch-when="goodbye">
      <goodbye>Lorem Ipsum.........</goodbye>
    </div>
  </div>
</div>

不幸的是，这不能解决我之前描述的重复代码问题。

所以我的问题是

有没有办法在保持转换代码相同的情况下切换组件，但不必多次重写被转换的代码？

如果没有，我可以使用哪些替代方法来实现我的目标，同时将重复代码的数量保持在最低限度？

Answer 1

解决此问题的一个方法是将转换为另一个组件。 (Fiddle)

.component('common', {
  template: 'Lorem Ipsum.........'
})

现在，唯一重复的代码将是组件的标记。

<div ng-controller="MyController">
  <hello ng-if="component === 'hello'"><common></common></hello>
  <goodbye ng-if="component === 'goodbye'"><common></common></goodbye>
</div>

如果不希望使用其他组件，也可以对ng-include执行相同的操作。

<div ng-controller="MyController">
  <hello ng-if="component === 'hello'"><ng-include src="'common.html'"></ng-include></hello>
  <goodbye ng-if="component === 'goodbye'"><ng-include src="'common.html'"></ng-include></goodbye>
</div>

如何在使用ng-transclude的组件之间切换？

在组件之间切换

重复代码问题

类似问题

所以我的问题是

1 个答案: