Question

我从NGJS过渡到NG并尝试重新编写我以前的应用程序以进行练习。

我偶然发现了新的NgInit，其中在Angular的组件中完成了初始化。

我想要实现的是在范围内初始化一个值，以用作隐藏和取消隐藏HTML元素的切换。我试图解决这个问题而不在ngOnInit() {}内循环来初始化数组中的每个对象。 （查看ng-init块中的ng-repeat ）

以下是我试图实现的方案的工作副本：

＆＃13;

angular.module("app", [])

.controller("controller", function($scope) {
  
  $scope.init = function() {
    $scope.modules = [
      {
        label: 'Module A',
        children: [
          'Module A - 1',
          'Module A - 2',
          'Module A - 3'
        ]
      },
      {
        label: 'Module B',
        children: [
          'Module B - 1',
          'Module B - 2',
          'Module B - 3'
        ]
      },
      {
        label: 'Module C',
        children: [
          'Module C - 1',
          'Module C - 2',
          'Module C - 3'
        ]
      }
    ];
  };
  
});

＆＃13;

.child {
  padding-left: 24px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.parent {
  padding: 8px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="app" ng-controller="controller" ng-init="init()">
  <div class="parent" ng-repeat="module in modules" ng-init="toggle=true">
    {{module.label}}
    <button ng-click="toggle = !toggle">toggle</button>
    <span ng-if="toggle" id="child-group">
      <div class="child" ng-repeat="child in module.children">
        {{child}}
      </div>
    </span>
  </div>
</body>

＆＃13;

如果您愿意，可以使用Plunker： https://plnkr.co/edit/JDBBPLkr21wxSe2dlRBv?p=preview

Answer 1

在声明组件的类时实现OnInit并将初始化代码移至ngOnInit函数。

@Component({
  ...
})
export class componentClass implements OnInit {
  ...

  ngOnInit() {
    // initialization code block
  }
}

提到Angular（Version2 +）为已创建的组件提供life hook。

对于ng-init部分的ng-repeat，从Angular2开始，您应该使用ngFor而ngFor仅允许定义一组有限的局部变量，请参阅 DOC 即可。

Answer 2

你可以这样做。用* ngFor循环遍历数组。该按钮切换相应的布尔值，该值定义您的元素是否显示（使用* ngIf指令）

@Component({
     selector: 'my-app',
     template: `
         <div *ngFor="let module of modules; let i = index">
         <button (click)="show[i] = !show[i]">toggle</button>
         <h2>{{module.label}}</h2>
         <div *ngIf="show[i]">
            <li *ngFor="let child of module.children">
             {{child}}
          </li>
         </div>
         </div>             
    `,
})

然后初始化变量：

export class AppComponent {     
  modules:any[];
  show:boolean[];

  constructor() {
    this.modules = [
    {
       label: 'Module A',
       children: [
      'Module A - 1',
      'Module A - 2',
      'Module A - 3'
    ]
    },
    {
      label: 'Module B',
      children: [
      'Module B - 1',
      'Module B - 2',
      'Module B - 3'
    ]
    },
    {
      label: 'Module C',
      children: [
      'Module C - 1',
      'Module C - 2',
      'Module C - 3'
    ]
    }
    ];
      this.show = this.modules.map(()=>true);
   }
 }

Answer 3

我不明白你的要求，你能更好地解释一下吗？为什么不尝试使用@component ...

@Component({
  selector: 'tag-selector',
  templateUrl: './pagina.html',
  styleUrls: ['./pagina.css']
})
export class Controller{
  your code
}

编辑：

如果你从Init声明$ scope，它应该可以正常工作

angular.module("app", [])

.controller("controller", function($scope) {

  $scope.init = function() {

  };
  $scope.modules = [{
    label: 'Module A',
    children: [
      'Module A - 1',
      'Module A - 2',
      'Module A - 3'
    ]
  }, {
    label: 'Module B',
    children: [
      'Module B - 1',
      'Module B - 2',
      'Module B - 3'
    ]
  }, {
    label: 'Module C',
    children: [
      'Module C - 1',
      'Module C - 2',
      'Module C - 3'
    ]
  }];

});

对不起，但我不确定我完全明白这个问题......

角度相当于AngularJS＆＃39; ng-init，其中包含Scope中的默认值

3 个答案: