Question

我有两个组件叫做Comp1＆amp; Comp2和我使用共享服务在Comp1方法中调用Comp2的方法。

这是我的代码

Comp1 HTML

 <div id="minimal-tabs" style="padding:75px;padding-top:60px;">
        <ul class="nav nav-tabs" style="font-family:Alef, sans-serif;">
            <li class="active"><a href="#tab-1" role="tab" data-toggle="tab">Comp1 Content</a></li>
            <li><a href="#tab-2" role="tab" data-toggle="tab">History </a></li>
            <!--<li><a href="#tab-3" role="tab" data-toggle="tab">History </a></li>-->
        </ul>
        <div class="tab-content">
            <div class="tab-pane active" role="tabpanel" id="tab-1">
 <button  style="padding-top:5px;" class="btn pagebtn btn-success btn-sm" type="button" (click)="open()">Call Com2 Method</button>
      </div>
            <div class="tab-pane" role="tabpanel" id="tab-2">

                <Comp2></Comp2>
            </div>
        </div>
    </div>

Comp2 HTML

<div class="table-responsive" style="margin-top:30px;font-size:14px;">
    <table class="table table-striped table-condensed">
        <thead>
            <tr>
                <th>Date/Time</th>
                <th>Duration </th>
                <th> </th>
            </tr>
        </thead>
        <tbody>

            <tr *ngFor="let meeting of recentMeetings">
                <td>{{meeting.StartDate}}</td>
                <td>{{meeting.Duration}}</td>
                <td>

                </td>
            </tr>
        </tbody>
    </table>
</div>

Comp1

import { Component, OnInit } from '@angular/core';
import { Router } from "@angular/router";
import { SharedService } from '../services/SessionShared.service';

@Component({
    selector: 'newconsult',
    templateUrl: 'app/components/newconsult.component.html'
})
export class NewConsultComponent {

 constructor(
        private _router: Router,
        , private sharedService: SharedService) {
    }

open() {
    if (this.sharedService.OnMeetingEnd) {

    this.telePsychSessionSharedService.OnMeetingEnd(currentMeeting, otherInfo);

     }

    }
}

器Comp2

import { Component, OnInit } from '@angular/core';
    import { Router } from "@angular/router";
    import { SharedService } from '../services/Shared.service';
    import { ZoomIntegrationService } from "../services/zoomIntegration.service";

    export class RecentMeeting {
        StartDate: string;
        Duration: string;

        constructor(_startDate: string, _Duration: string, ) {
            this.StartDate = _startDate; this.Duration = _Duration; 
        }
    }

    @Component({
        selector: 'Comp2',
        templateUrl: 'app/components/Comp2.component.html'
    })
    export class Comp2Component {
        public recentMeetings: Array<RecentMeeting> = [];

        constructor(
            private _router: Router
            , private SharedService: TelePsychSessionSharedService
            , private zoomItegrationService: ZoomIntegrationService
        ) {
            this.sharedService.OnMeetingEnd = this.populateGrid;

        }

        populateGrid(otherdata): void {

            var meetingInfo = {};


            this.zoomItegrationService.getMeeting(params,
          (res) => {
            meetingInfo = res;

              this.recentMeetings.push(new RecentMeeting(
                meetingInfo.start_time,
                otherdata.duration,

            ));
            }
        },
        (err) => { });
            if (!this.recentMeetings) {
                this.recentMeetings = [];
            }



        }

SharedService

import { Injectable } from '@angular/core';
import { Http, Headers, Response } from "@angular/http";

@Injectable()
export class SharedService {

    OnMeetingEnd: Function;

    constructor() { }
}

此代码正常工作，我可以调用Comp1方法并将数据传递给Comp2方法。

但是当我从comp1方法调用 comp2方法时，问题是调用API方法或数据未加载到网格（我单独测试）。 / p>

我已经使用debuger进行了检查，它显示数据正确传递给填充网格方法。

如果我将测试方法与此填充网格方法相同并通过向Comp2 HTML添加按钮来调用它，则可以正常工作。
只有当我从Comp1组件调用Comp2方法时才会出现
问题。

我该如何解决这个问题？

我的角度版本 - 2.4.0 打字稿版本 - 2.0.3

使用共享服务角度2

0 个答案: