Question

我有一个指令和一个页面（我的实际代码的简化版本）。当通过一个事件调用myMethod时，我需要myPages isTrue方法成为true，但我不确定如何从指令访问页面的变量。我怎样才能做到这一点？ PS。我正在使用一个基于Angular2的框架，名为Ionic2。

@Directive({
    selector: '[mySelector]'
})

export class myDirective {

    constructor() {
    }

    myMethod() {
        //Make myPage's isTrue equal to true;

    }

}


@Page({
    templateUrl: 'build/pages/myPage/myPage.html',
    directives: [myDirective]
})
export class myPage{

    isTrue= false;

    constructor() {}
}

Answer 1

您可以使用@Output装饰器在指令中使用自定义事件：

@Directive({
  selector: '[mySelector]'
})
export class myDirective {
  @Output()
  customEvent:EventEmitter<boolean> = new EventEmitter();

  myMethod() {
    this.customEvent.emit(true);
  }

  // Just a way to call the myMethod method
  ngAfterViewInit() {
    setTimeout(() => {
      this.myMethod();
    }, 1000);
  }
}

在组件中，事件可以通过这种方式来更新isTrue属性：

@Component({
  selector: 'my-app',
  template: `
    <div mySelector (customEvent)="updateIsTrue($event)"></div>
    <div>isTrue = {{isTrue}}</div>
  `,
  directives: [ myDirective ] 
})
export class AppComponent { 
  isTrue= false;

  updateIsTrue() {
    this.isTrue = true;
  }
}

将此plunkr视为示例：https://plnkr.co/edit/yuFTwMqYVNJ2awcK02gf?p=preview。

另一种选择是将组件注入指令中。为此，您需要利用forwardRef函数，因为不支持类提升：

@Directive({
  selector: '[mySelector]'
})
export class myDirective {
  constructor(@Inject(forwardRef(() => AppComponent)) private host: AppComponent) {

  }

  myMethod() {
    this.host.isTrue = true;
  }

  ngAfterViewInit() {
    setTimeout(() => {
      this.myMethod();
    }, 1000);
  }
}

请参阅此plunkr：https://plnkr.co/edit/jOlEWZzilTId3gruhu9B?p=preview。

从自定义指令访问页面的变量

1 个答案: