将变量从函数传递到模板

Question

我正在使用 @ViewChild 将值传递给子模板函数 - 基本上，父级将值传递给下面的 transition() 函数，将其传递到控制台日志没有问题，但我希望在模板，上面写着“价值是 {{ 价值}}”，但它只是保持空白.. 有什么想法吗？

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


            }

父视图

            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');

                }

            }

基本上，每当有人单击路由时，routerCanDeactivate 应该会产生延迟并显示加载组件，但我对如何完成此操作非常迷茫，所以我可能完全走错了方向......基本上是当用户单击链接时我希望一个 div 与我的徽标一起在屏幕上转换，并在页面准备就绪时消失。

目前 routercandeactive 只是将一个字符串传递给我的子视图中的函数，也就是使用 this.transitionComponent.transition("sdfsfsdf"); 的加载器；

Answer 1

您可以使用模板绑定来获取从父级到子级传递和更新的值：

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