Zugriff auf die Variable einer Seite aus einer benutzerdefinierten Anweisung

Question

Ich habe eine Direktive und eine Seite (vereinfachte Version meines tatsächlichen Codes). Wenn myMethod über ein Ereignis aufgerufen wird, muss die Methode myPages isTrue wahr werden, aber ich bin mir nicht sicher, wie ich von der Anweisung auf die Variable der Seite zugreifen kann. Wie kann ich das machen? PS. Ich verwende ein Framework, das auf Angular2 basiert, Ionic2 genannt.

@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

Sie können ein benutzerdefiniertes Ereignis in Ihrer Richtlinie mit dem @Output Dekorateur verwenden:

@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); 
    } 
} 

In der Komponente könnte das Ereignis auf diese Weise werden fangen die isTrue Eigenschaft zu aktualisieren:

@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; 
    } 
} 

Sehen Sie diese Plunkr als Beispiel: https://plnkr.co/edit/yuFTwMqYVNJ2awcK02gf?p=preview.

Eine andere Möglichkeit wäre, die Komponente in die Richtlinie zu injizieren. Dazu müssen Sie die forwardRef Funktion nutzen, da Klasse Hebe nicht unterstützt wird:

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

    } 

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

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

dieses plunkr Siehe: https://plnkr.co/edit/jOlEWZzilTId3gruhu9B?p=preview.