Question

This proof of concept directive在Firefox Stack-blitz中以及将其导出到vs代码时都可以正常工作；但是，当我尝试将其引入应用程序时，它并没有给我任何错误，但是如您所见，它没有记录任何生命周期挂钩。这是浏览器中的外观：

我在下面的vs代码中添加了每个组件中的代码。

那么我在这里想念什么？这在我的堆叠闪击原型中可以正常工作...

上下文：我的指令放置在父节点上，并与子节点进行交互。应该可以这样工作，以便在主机父视图框容器内的（鼠标）上建立所有子组件的空间/位置的中心，计算它们的x-mid-line，然后滚动到x-mid-最接近父/视图框中线的行（在stack-blitz控制台中查看）。任何见解表示赞赏！谢谢

快照中的第二个窗口：指令：

import { Directive, OnInit, AfterViewInit, Input, HostListener, ElementRef } from '@angular/core';

@Directive({
  selector: '[windowsnap]'
})
export class WindowSnapDirective implements OnInit, AfterViewInit {



  scrollhistory = [];
  parent = this.el.nativeElement;

  constructor(private el: ElementRef) {
    console.log('windowsnap constructor')
  }

  ngOnInit() {
    console.log('windowsnap oninit')
  }
  ngAfterViewInit() {
    console.log('windowsnap afterviewinit')
  }

  closest(num, arr) {
    let curr = arr[0];
    arr.forEach((val) => {
      if (Math.abs(num - val) < Math.abs(num - curr)) {
        curr = val
      }
    });
    return curr;
  }


  @HostListener('mouseup') onMouseUp() {
    // logging x-scroll history into an array
    this.scrollhistory.unshift(this.parent.scrollLeft);
    console.log(this.scrollhistory)

    // this is to prevent unnecesary scrolls to the same component
    if (this.parent.scrollLeft != this.scrollhistory[1]) {


      //  child element declarations
      let child1El = this.parent.querySelector('child1');
      let child2El = this.parent.querySelector('child2');
      let child3El = this.parent.querySelector('child3');

      // child1 boundaries
      let child1leftBoundary: number = child1El.offsetLeft;
      let child1middleBoundary: number = child1El.offsetWidth * 0.5 + child1leftBoundary;
      let child1rightBoundary: number = child1El.offsetWidth + child1leftBoundary;
      // console.log('child1 Left: ' + child1leftBoundary +', child1 Middle: ' + child1middleBoundary +  ', child1 Right: ' + child1rightBoundary)

      // child2 boundaries
      let child2leftBoundary: number = child2El.offsetLeft;
      let child2middleBoundary: number = child2El.offsetWidth * 0.5 + child2leftBoundary;
      let child2rightBoundary: number = child2El.offsetWidth + child2leftBoundary;
      // console.log('child2 Left: ' + child2leftBoundary + ', child2 Middle: ' + child2middleBoundary + ', child2 Right: ' + child2rightBoundary)

      // child3 boundaries
      let child3leftBoundary: number = child3El.offsetLeft;
      let child3middleBoundary: number = child3El.offsetWidth * 0.5 + child3leftBoundary;
      let child3rightBoundary: number = child3El.offsetWidth + child3leftBoundary;
      console.log('child3 Left: ' + child3leftBoundary + ', child3 Middle: ' + child3middleBoundary + ', child3 Right: ' + child3rightBoundary)


      //  x view boundaries
      let viewBoxL = (this.parent.scrollLeft)
      let viewBoxC = (this.parent.scrollLeft + (this.parent.offsetWidth * 0.5))
      let viewBoxR = (this.parent.scrollLeft + (this.parent.offsetWidth))
      // console.log(viewBoxL);
      // console.log( this.parent.scrollLeft + (this.parent.offsetWidth*0.5));
      // console.log( this.parent.scrollLeft + (this.parent.offsetWidth));


      //positioning calculations
      let a = (viewBoxC - child1middleBoundary)
      // console.log('a:' + a)
      let b = (viewBoxC - child2middleBoundary)
      // console.log('b:' + b)
      let c = (viewBoxC - child3middleBoundary)
      // console.log('c:' + c)


      // make list of children mid points and get closest number to zero
      let closestChildMid = this.closest(0, [a, b, c])
      console.log("closest: " + closestChildMid)

      //if a highest number scroll to childa
      if (closestChildMid === a) {
        child1El.scrollIntoView({ behavior: "smooth", block: "center" });
      }
      //if b highest number scroll to childb
      if (closestChildMid === b) {
        child2El.scrollIntoView({ behavior: "smooth", block: "center" });
      }
      //if c highest number scroll to childc
      if (closestChildMid === c) {
        child3El.scrollIntoView({ behavior: "smooth", block: "center" });
      }
    }
  }
}

不在快照中，而是在jsut中，因此您知道这在app.module中指令模块：

import { NgModule } from '@angular/core';

import { WindowSnapDirective } from './windowsnap.directive';



@NgModule({
    imports: [],
    providers: [],
    exports: [WindowSnapDirective],
    declarations: [WindowSnapDirective]
})
export class WindowSnapModule { }

这是快照中的第三个窗口：父组件：

import { OnInit } from '@angular/core';
import { OrgStateService } from './../../shared/services/OrgManagement/OrgState.service';

import { Component } from '@angular/core';
import { slideToRight } from '../../router.animations';

@Component({
  selector: 'app-org-management',
  templateUrl: './org-management.component.html',
  styleUrls: ['./org-management.component.css'],
  // host: {
  //   'class': 'blade-container'
  // },
  animations: [slideToRight()]
})
/** OrgManagement component*/
export class OrgManagementComponent implements OnInit {

  ngOnInit() {
    console.log('org-management is running')
  }

  level0: string;
  level1: string;
  level2: string;
  level3: string;
  level4: string;
  level5: string;
  level6: string;

  constructor(private viewstate: OrgStateService) {
    this.viewstate.currentLevel0.subscribe(level0 => this.level0 = level0)
    this.viewstate.currentLevel1.subscribe(level1 => this.level1 = level1)
    this.viewstate.currentLevel2.subscribe(level2 => this.level2 = level2)
    this.viewstate.currentLevel3.subscribe(level3 => this.level3 = level3)
    this.viewstate.currentLevel4.subscribe(level4 => this.level4 = level4)
    this.viewstate.currentLevel5.subscribe(level5 => this.level5 = level5)
    this.viewstate.currentLevel6.subscribe(level6 => this.level6 = level6)
  }
}

快照中的第一个窗口：父模板：

<div class="blade-container" windowsnap>
  <!-- level 1 -->
  <org-management-blade #child01> </org-management-blade>

  <!-- level 2 -->
  <org-setup #child02 *ngIf="level2 === 'orgSetup'"></org-setup>
  <!-- <process-user *ngIf="stateUserMan === 'processUserReq'"></process-user>
  <pending-user *ngIf="stateUserMan === 'pendingUserReq'"></pending-user> -->

  <!-- level 3 -->
  <org-info #child03 *ngIf="level3 === 'orgInfo'"></org-info>
  <org-admins #child03 *ngIf="level3 === 'orgAdmins'"></org-admins>
  <org-cust-mapping #child03 *ngIf="level3 === 'custMapping'"></org-cust-mapping>
  <org-security-profiles #child03 *ngIf="level3 === 'secProfiles'"></org-security-profiles>

  <!-- level 4 -->
  <org-create-admin #child04 *ngIf="level4 === 'orgCreateAdmin'"></org-create-admin>
  <org-new-security-profile #child04 *ngIf="level4 === 'newSecProfile'"></org-new-security-profile>
  <org-railroad-filter #child04 *ngIf="level4 === 'newSecRailroadFilter'"></org-railroad-filter>

  <!-- level 5 -->
  <org-security-permissions  #child05 *ngIf="level5 === 'newSecPerms'"></org-security-permissions>

  <!-- level 6 -->

</div>

Angular 6指令未在应用中实例化，但已在概念上证明

0 个答案: