如何调用另一个组件的 ngoni() 方法

Question

我想在 confiramation.ts 中的 setStatusofuser() 方法之后渲染工作负载方法 ngonit() 我该怎么做才能有人帮忙。

这是我的 Confirmation.ts 组件

import { Component, Inject, OnInit } from '@angular/core';
import { MatDialog, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { courses } from '../models/courses';
import { CoursesService } from '../services/course.service';

@Component({
  selector: 'app-confirmation',
  templateUrl: './confirmation.component.html',
  styleUrls: ['./confirmation.component.css']
})
export class ConfirmationComponent implements OnInit {
  msg: string = '';
  condition:boolean;
  courseList: Array<courses>;

  constructor(private courseService: CoursesService,  @Inject(MAT_DIALOG_DATA) public data: any,
  public dialog: MatDialog,) { }

  ngOnInit(): void {
   
  }
  getAllCourses(){
    this.courseService.getAllCourses('PATKRISH').subscribe((data) => {
      this.courseList = data;
      console.log(this.courseList);
    });
  }
  setStatusOfUser(){
    this.courseService.setStatus(this.data.courseId,'PATKRISH').subscribe((data)=>{
      this.msg=data;
      this.getAllCourses()
     
    })
    this.condition=true;
    this.courseService.getAllCourses('PATKRISH').subscribe((data) => {
      this.courseList = data;
      console.log(this.courseList);
    });
  
  }

}

在 setStatusOfUser() 方法之后，我想渲染工作负载组件 ngoni 方法

工作负载.component.ts

import { Component, OnInit } from '@angular/core';
import { WorkloadService } from '../services/workload.service';



@Component({
  selector: 'app-workload',
  templateUrl: './workload.component.html',
  styleUrls: ['./workload.component.css']
})

    export class WorkloadComponent implements OnInit {
    
      constructor(private workloadService:WorkloadService) { }
    
      workload:number=0;
    
      ngOnInit(): void {
        this.workloadService.getWorkloadPercentage("PATKRISH").subscribe(
          data => {
            if(data==0){
             this.workload=0;
            }else{
              this.workload=data;
            }
            console.log(data);
          },
          error=>{console.log(error);
          this.workload=0;}
        );
      }
    
    }

course.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable, Subject } from 'rxjs';
import { courses } from '../models/courses';

// import { AddProgress } from '../interface/progress';
const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type': 'application/json',
    
  }),
};
@Injectable({
  providedIn: 'root',
})
export class CoursesService {
  private subject = new Subject<any>();
  constructor(private httpClient: HttpClient) {}
  // http://localhost:8080/api/addassignment/coursebyuserid/PERAVIKA
  getAllCourses(userId: any): Observable<courses[]> {
    return this.httpClient.get<courses[]>(
      `http://localhost:8080/api/addassignment/coursebyuserid/${userId}`
    );
  }
  setStatus(courseId: any, userId: any): Observable<string> {
    return this.httpClient.put<string>(
      `http://localhost:8080/api/addassignment/${courseId}/${userId}`,
      httpOptions
    );
  }
}

工作负载.服务.ts

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class WorkloadService {
  constructor(private _http: HttpClient) {}

  getWorkloadPercentage(id: string): Observable<number> {
    return this._http.get<number>(
      `http://localhost:8080/api/learningmeter/getmeter/PATKRISH`
    );
  }
}

Answer 1

您不调用 ngOnInit - 它是一个生命周期方法 - 框架在组件初始化时调用它。

如果您希望 ngOnInit 方法中的功能在其他时间发生（除了组件的初始化），我建议您将其移至另一个（非生命周期）方法。

如果您在初始化时和以后都想要该功能，那么您可以从 ngOnInit 调用新方法。