Question

我有一个称为PreloaderComponent的通用组件，并且已将其包含在另一个组件中。我需要知道如何将变量从父组件传递到PreloaderComponent，以便在模板中使用*ngIf语句。

这是我的代码：

<div id="preloader" *ngIf="loader">
    <div id="status">
        <div class="spinner"></div>
    </div>
</div>

export class PreloaderComponent implements OnInit {
  constructor() {}

  loader:any;

  ngOnInit() {}

  startLoader(){
    this.loader = true;
    //console.log("start loader="+this.loader);
  }
}

export class NativeExecutiveSummaryComponent implements OnInit {
    ngOnInit() {
        this.preloader.startLoader();
    }
}

Answer 1

创建一个以loaderSource作为BehaviourSubject的通用服务，并将该服务注入组件的构造函数中并订阅loader Observable。

loader.service.ts

import { BehaviorSubject } from 'rxjs';

@Injectable()
export class LoaderService {

  private _loaderSource:any = new BehaviourSubject<any>({});
  public loader = this._loaderSource.asObservable();

  //set the loader value
  setLoader(loader){
    this._loaderSource.next(loader);
  }
}

preloader.component.ts

import { LoaderService } from '../services/loader.service.ts'

export class PreloaderComponent implements OnInit {

  constructor(private _loaderService: LoaderService) {}

  public loader:any;

  ngOnInit() {
    this._loaderService.loader.subscribe(load => { this.loader = load });
  }
}

parent.component.ts

import { LoaderService } from '../services/loader.service.ts'

export class ParentComponent implements OnInit {

   constructor(private _loaderService: LoaderService) {}

   ngOnInit() {
      this._loaderService.setLoader(true); // this will set the loader value
   }
}

您的loader变量现在将包含值true，并将与您的*ngIf

一起使用

Answer 2

您可以使用ViewChild组件方法将方法从一个组件调用到另一组件。在您的NativeExecutiveSummaryComponent类中编写此代码。参见下面的代码：

@BaseImport.ViewChild(PreloaderComponent)
private preloaderComponent: PreloaderComponent;
this.preloaderComponent.startLoader();

Answer 3

在NativeExecutiveSummaryComponent的HTML文件中，您可能具有类似以下的代码：

<app-preloader></app-preloader>

为此标签提供一个这样的ID：

<app-preloader #preloaderId></app-preloader>

然后在NativeExecutiveSummaryComponent内部，您可以使用Viewchild这样访问此元素：

 import {ViewChild} from '@angular/core';
 .
 .
 export class NativeExecutiveSummaryComponent implements OnInit {
   @ViewChild('preloaderId') preloaderElement: PreloaderComponent;

   ngOnInit() {
        this.preloader.startLoader();
   }
 }

这应该可以解决您的问题。

如何将* ngIf值从一个组件传递到另一个组件？

3 个答案: