范围内具有默认值的AngularJS ng-init的等效角

Question

I'm transitioning from NGJS to NG and trying to recode my previous application to practice. 我正在从NGJS过渡到NG，并尝试重新编码我以前的应用程序以进行练习。

I stumbled upon the new NgInit where initializations are done in Angular's Component. 我偶然发现了新的NgInit，其中在Angular的Component中完成了初始化。

What I'm trying to achieve is to initialize a value WITHIN the scope to be used as a toggle to hide and unhide HTML elements. 我想要实现的是在范围内初始化一个值，以用作隐藏和取消隐藏HTML元素的切换。 I'm trying to solve this without looping within ngOnInit() {} to initialize for each object within the array. 我正在尝试解决此问题而无需在ngOnInit() {}循环来初始化数组内的每个对象。 ( See ng-init in ng-repeat block ) （ 请参见ng-init ng-repeat块中的ng-init ）

Below is a working copy of the scenario I'm trying to achieve: 以下是我要实现的方案的工作副本：

 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' ] } ]; }; });

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

 <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>

Here's a Plunker if you prefer: https://plnkr.co/edit/JDBBPLkr21wxSe2dlRBv?p=preview 如果您愿意，可以使用Plunker： https ://plnkr.co/edit/JDBBPLkr21wxSe2dlRBv?p = preview

Answer 1

Implement OnInit while declaring the component's class and move your initialization code to ngOnInit function. 在声明组件的类的同时实现OnInit ，并将初始化代码移至ngOnInit函数。

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

  ngOnInit() {
    // initialization code block
  }
}

Mention that Angular(Version2+) provides life hook for a component from been created to been destroyed. 提到Angular（Version2 +）提供了从创建到销毁组件的生命周期。

For ng-init at ng-repeat part, From Angular2, you should use ngFor instead and ngFor only allows a limited set of local variables to be defined, see DOC . 对于ng-init ng-repeat部分的ng-init ，应从Angular2使用ngFor而ngFor只允许定义一组有限的局部变量，请参阅DOC 。

Answer 2

You could do it like this. 您可以这样做。 You loop over your array with *ngFor. 您可以使用* ngFor遍历数组。 The button toggles the corresponding boolean value, which defines if your element is shown or not (with the *ngIf directive) 该按钮切换相应的布尔值，该值定义是否显示您的元素（使用* 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>             
    `,
})

Then initialize your variables: 然后初始化变量：

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

I did not understand your request, could you explain yourself better? 我不理解您的要求，您能更好地解释一下自己吗？ why do not you try to use the @component ... 你为什么不尝试使用@component ...

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

Edit: 编辑：

if you declare the $scope out of Init, it should work anyway 如果您从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'
    ]
  }];

});

I'm sorry, but I'm not sure I fully understood the question ... 很抱歉，但是我不确定我是否完全理解这个问题...

范围内具有默认值的AngularJS ng-init的等效角

问题描述

3 个解决方案

解决方案1
2 2018-03-22 08:07:45

解决方案2
2 已采纳 2018-03-22 09:43:33

解决方案3
0 2018-03-22 08:15:26

范围内具有默认值的AngularJS ng-init的等效角

问题描述

3 个解决方案

解决方案1 2 2018-03-22 08:07:45

解决方案2 2 已采纳 2018-03-22 09:43:33

解决方案3 0 2018-03-22 08:15:26

解决方案1
2 2018-03-22 08:07:45

解决方案2
2 已采纳 2018-03-22 09:43:33

解决方案3
0 2018-03-22 08:15:26