Übergeben von Variablen in Vorlage von Funktion

Question

Im @ViewChild, um einen Wert an eine Child-Templates-Funktion übergeben - im Grunde der Eltern übergibt einen Wert an die Funktion transition() unten und es funktioniert kein Problem übergibt es an die Konsole log, aber ich will der zu aktualisierende Wert in der Vorlage, wo "WERT IST {{Wert}}" steht, aber es bleibt einfach leer ... irgendwelche Ideen?

  import {Component, Input, Output, EventEmitter} from '@angular/core'; 

      @Component({ 
      selector: 'reptilehaus-loader', 
      template: `<div class="loader">THE VALUE IS {{ value }}</div>`, 
      styles: [` 
      .loader { 
      background-color: white; 
      height: 100px; 
      width:100px; 
      position:absolute; 
      top:0; 
      right:0; 
      color: black; 
      z-index:99999; 
      } 
      `] 
      }) 


      export class TransitionComponent { 

       value: string; 

        constructor() {} 

        transition(value) { 
         console.log(value); 
        } 


      } 

Die übergeordnete Ansicht

  import {Component, ElementRef, OnInit, ViewChild} from '@angular/core'; 
      import {ProjectsMainApi} from '../../../services/projects-main'; 
      import 'rxjs/Rx'; 
      import {Observable} from 'rxjs/Observable'; 
      import { ROUTER_DIRECTIVES } from '@angular/router-deprecated'; 
      import {CanDeactivate, RouteTree} from '@angular/router'; 
      import {TransitionComponent} from '../../PageLoader/TransitionComponent'; 
      declare var jQuery: any; 


      // <a class="project-display-matrice" *ngFor="let projekt of project | async" [routerLink]="['ProjectDetail', { projectlink: projekt.slug }]" > 

      @Component({ 
       selector: 'projects', 
       template: 
        `<div> template here </div> 
        </a><loader></loader>`, 
       directives: [ROUTER_DIRECTIVES,TransitionComponent] 
      }) 

      export class ProjectsListComponent implements CanDeactivate, OnInit { 

       elementRef: ElementRef; 
       project: Observable<any>; 

       @ViewChild(TransitionComponent) transitionComponent: TransitionComponent; 


       constructor() { 
       } 
       ngOnInit() { 

       } 

       routerCanDeactivate(currTree?: RouteTree, futureTree?: RouteTree): Promise<boolean> { 
        console.log('PROJECT LIST'); 
        // console.log('Item: ', currTree); 
        this.transitionComponent.transition("sdfsfsdf");  
        return new Promise((resolve, reject) => { 
         jQuery('.loader').addClass('show'); 
         setTimeout(() => resolve(true), 1000); 
        }); 
       } 

       changeRoute() { 

        alert('test'); 

       } 

      } 

Grundsätzlich, wenn jemand eine Route routerCanDeactivate eine Verzögerung schaffen, sollte klickt und die Ladekomponente zeigen, aber ich bin schön verloren, wie diese habe ich wohl so zu tun gegangen total die falsche Richtung ... grundsätzlich, wenn ein Benutzer auf einen Link klickt, möchte ich ein div über den Bildschirm mit meinem Logo wechseln und verschwinden, wenn die Seite fertig ist.

Gegenwärtig übergibt routercandeactive nur eine Zeichenfolge an die Funktion in meiner untergeordneten Ansicht alias der Loader mit this.transitionComponent.transition ("sdfsfsdf");

Answer 1

Sie können mit Vorlage einen Wert erhalten Bindung weitergegeben und aktualisiert von den Eltern auf die Kinder:

 @Component({ 
     selector: '...', 
     directives: [TransitionComponent] 
     template: '<reptilehaus-loader [value]="transition"></reptilehaus-loader>' 
     }) 
     export class ProjectsListComponent implements CanDeactivate, OnInit { 
      transition:any; 
      elementRef: ElementRef; 
      project: Observable<any>; 

      routerCanDeactivate(currTree?: RouteTree, futureTree?: RouteTree): Promise<boolean> { 
       console.log('PROJECT LIST'); 
       // console.log('Item: ', currTree); 
       this.transition = "sdfsfsdf";  
       return new Promise((resolve, reject) => { 
        jQuery('.loader').addClass('show'); 
        setTimeout(() => resolve(true), 1000); 
       }); 
      } 

      changeRoute() { 
       alert('test'); 
      } 
     } 

 export class TransitionComponent { 
      @Input() value: string; 
     }