范圍內具有默認值的AngularJS ng-init的等效角

Question

我正在從NGJS過渡到NG，並嘗試重新編碼我以前的應用程序以進行練習。

我偶然發現了新的NgInit，其中在Angular的Component中完成了初始化。

我想要實現的是在范圍內初始化一個值，以用作隱藏和取消隱藏HTML元素的切換。 我正在嘗試解決此問題而無需在ngOnInit() {}循環來初始化數組內的每個對象。 （ 請參見ng-init ng-repeat塊中的ng-init ）

以下是我要實現的方案的工作副本：

 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>

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

Answer 1

在聲明組件的類的同時實現OnInit ，並將初始化代碼移至ngOnInit函數。

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

  ngOnInit() {
    // initialization code block
  }
}

提到Angular（Version2 +）提供了從創建到銷毀組件的生命周期。

對於ng-init ng-repeat部分的ng-init ，應從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 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