Question

我正在处理角度js组件，有两个组件会在单击它们各自的按钮时调用

问题：当页面加载时，两个组件都被初始化，但实际上它们应该在我点击相应的组件时进行初始化例如：

的index.html

    <div class='breadcrumbs'>
   <div class='inner'>
      <ul class='cf' style="    margin-top: 0px;">
         <li ng-click="WizardsViewerCtrl.createFirst()">

         </li>
         <li ng-click="WizardsViewerCtrl.createSecond()">
         <span>Arrange Questions</span> </a>

         </li>

      </ul>
   </div>
</div>

      <div ng-show="viewFirstRoute">
         <first-component></first-component>
      </div>
      <div ng-show="viewSecondRoute">
         <second-component></second-component>

      </div>

index.js

$scope.viewFirstRoute=false;
$scope.viewSecondRoute=false;



function createFirst() {

    $scope.viewFirstRoute=true;
    $scope.viewSecondRoute=false;


}

function createSecond() {
   $scope.viewFirstRoute=false;
    $scope.viewSecondRoute=true;


}

问题是当加载此页面 index.html 时，两个组件都已初始化

first.component.js

angular
.module('AOTC')
.component('firstComponent', {
        templateUrl: 'first.html',
        controllerAs: 'firstCtrl',
        controller:(function ($scope) {
            console.log("first component loaded");//it prints while index.html is loaded even i didn't clicked on this component
           })});

second.component.js

angular
.module('AOTC')
.component('secondComponent', {
        templateUrl: 'second.html',
        controllerAs: 'secondCtrl',
        controller:(function ($scope) {
            console.log("second component loaded");//it prints while index.html is loaded even i didn't clicked on second component
           })});

总结：当我点击相应的组件时，必须初始化同一路线上的两个组件，但是一旦路由加载就行为注意到组件被加载它没有关心点击，请参阅JS文件中的评论

Answer 1

使用ng-if代替ng-show。它应该解决问题。

<div ng-if="viewFirstRoute">
         <first-component></first-component>
 </div>
 <div ng-if="viewSecondRoute">
     <second-component></second-component>
  </div>

ng-show：它会向DOM添加组件，但将其display属性设置为none ng-if：将有条件地从DOM中添加或删除组件。

组件在调用angularjs之前加载

1 个答案: