如何在angular6 html页面中实现ng-init指令?

时间:2018-12-19 12:00:51

标签: typescript angular6

这是我的代码

@Directive({
  selector: 'ngInit',
  exportAs: 'ngInit'
}) 
export class NgInit {
  @Input() values: any = {};

  @Input() ngInit;
  ngOnInit() {
    if(this.ngInit) { this.ngInit(); }
  }  
}
<div style="width:100%">
      <div style="width: 100%;height: 450px;border: 1px solid black;overflow-y: auto;">
          <div class="tree_block" >
              <ng-template #recursiveList let-tempData>
                  <div class="tree_block_item" [ngInit]="mainparent=parent">
                      <div [ngClass]="(mainparent==null   || mainparent.visibility)? 'display_block' : 'display_none'">
                          <button type="button" class="iobuilderclose pull-right" (click)="close()">&times;</button>
                          <div class="tbi">
                              <strong *ngIf="tempData!=null && tempData.childJobject.length>0" [ngInit]="mainparent=parent">
                                  <i [ngClass]="mainparent.visibility ? 'showDownDrop' : 'showUpDrop' " (click)="showHideVisibility(mainparent)"></i>
                              </strong>
                          </div>
                          <a *ngIf="tempData.id!=initObject.id" class="del-row" (click)="deleteObject(tempData,mainparent.childJobject)"><i class="nc-icon-outline ui-1_trash-simple"></i></a>
                      </div>
                  </div>
                  <ul [ngInit]="parent=tempData">
                      <li *ngFor="let tempData of tempData.childJobject">
                          <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: tempData }"></ng-container>
                      </li>
                  </ul>
              </ng-template>
              <div class="under_tree_menu">
                  <nav style="vertical-align:top; width:100%;">
                      <ul [ngInit]="parent=tempDataArray">
                          <li *ngFor="let tempData of tempDataArray">
                          <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: tempData }"></ng-container>
                          </li>
                      </ul>
                  </nav>
                  <div class="clearfix"></div>
              </div>
          </div>
      </div>
</div>

在上面的代码中,我将ng-template与ng-container一起使用。现在我正在使用nginit来为* ngFor内的特定变量分配值,因此我正在为nginit编写自定义指令,但这不起作用。那么如何实现ng-init指令,以便使用angular6在* ngFor内将值分配给特定变量。

0 个答案:

没有答案