Question

我使用@ViewChild将值传递给子模板函数 - 基本上父级将值传递给下面的transition（）函数，并且将它传递给控制台日志没有问题，但我希望值更新在它所说的模板＆＃34;值是{{value}}＆＃34;但它只是保持空白......任何想法？

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

                }

            }

基本上每当有人点击一个路由时，路由器应该创建一个延迟并显示加载组件，但我很失落如何实现这一点，所以我可能走错了方向...当用户点击一个链接时基本上我希望div能够通过我的徽标在屏幕上过渡，并在页面准备好后消失。

目前，routercandeactive只是将一个字符串传递给我的子视图中的函数，即使用this.transitionComponent.transition（＆＃34; sdfsfsdf＆＃34;）的加载器;

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

从函数传递变量到模板

1 个答案: