Question

我有一个指令，可以在页面上的任何悬停元素上添加框阴影，但是我需要它才能在单击按钮后开始应用阴影。我遇到的问题是它只适用于单个元素。

我将鼠标悬停后仅适用于标题。我需要它适用于任何悬停元素。

我的app.component：

then 1 else 0

我的亮点。指示：

@Component({
  moduleId: module.id,
  selector: 'my-app',
  template: `
    <h1 myHighlight="orange">{{title}} {{clickedElement | async}}</h1>
    <nav>
      <a routerLink="/dashboard" routerLinkActive="active">Dashboard</a>
      <a routerLink="/heroes" routerLinkActive="active">Heroes</a>
      <a routerLink="/secret-heroes" *ngIf="authService.loggedIn()" routerLinkActive="active">Secret Heroes</a>
      <a (click)=authService.login() *ngIf="!authService.loggedIn()">Log In</a>
      <a (click)=authService.logout() *ngIf="authService.loggedIn()">Log Out</a>
      <a (click)=giveFeedback()>Give Feedback</a>
      <a (click)="listening = !listening" >Give Feedback2</a>

      <button id="modalButton" type="button" (click)="feedbackModal.show()">test</button>
      <my-feedback-modal>
      </my-feedback-modal>

    </nav>
    <router-outlet></router-outlet>
  `,
  styleUrls: ['app.component.css']
})
export class AppComponent {
  //@Input() highlight: boolean = false;
  title = 'Tour of Heroes';

  @ViewChild(ModalComponent) modal: ModalComponent;
  @ViewChild(HighlightDirective) highlightDir: HighlightDirective;

  @ViewChild(FeedbackModalComponent) feedbackModal: FeedbackModalComponent;

  constructor(private authService: AuthService, private el: ElementRef, private cdr: ChangeDetectorRef) {
    this.cdr = cdr;
  }

  clickedElement:BehaviorSubject<ElementRef> = new BehaviorSubject(this.el);

  ngAfterViewInit() {
    //this.clickedElement.next(this.highlightDir.getElement().nativeElement.nodeName);
  }

  ngDoCheck() {

  }

  giveFeedback(): void {

        this.highlightDir.startFeedback();
        this.cdr.detectChanges();
        //this.highlight = true;
  }
}

非常感谢任何帮助。

Answer 1

问题是您使用的是@ViewChild而不是@ViewChildren。使用ViewChild，它只会解决它可以在模板中找到的HighlightDirective的第一个实例。

除了你在这里做的其他一些晦涩的选择之外，我会说你必须改变这样的事情：

@ViewChildren(HighlightDirective) highlightDirs: QueryList<HighlightDirective>;

然后，您必须将giveFeedback函数更改为：

giveFeedback(): void {
    this.highlightDirs.forEach((highlightDir: HightlightDirective) => {
       highlightDir.startFeedback();
    });
}

您的任何代码中都不需要changeDetectionRef。只有将changeDetection: ChangeDetectionStrategy.OnPush放在组件/指令

上时才需要这样做

单击时组件的Angular2触发器指令

1 个答案: