[英]How can I pass an *ngIf value from one component to another?
I have a common component called PreloaderComponent
and I have included it in another component. 我有一个名为PreloaderComponent
的通用组件,我将它包含在另一个组件中。 I need to know how to pass a variable from the parent component to the PreloaderComponent
in order to work with an *ngIf
statement in the template. 我需要知道如何将变量从父组件传递到PreloaderComponent
,以便在模板中使用*ngIf
语句。
Here is my code: 这是我的代码:
<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();
}
}
Create a common service which has loaderSource
as a BehaviourSubject
and inject the service into the constructor of your component and subscribe to the loader
Observable. 创建一个公共服务, loaderSource
作为BehaviourSubject
并将服务注入组件的构造函数并订阅loader
Observable。
loader.service.ts 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 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 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
}
}
Your loader
var will now contain the value true
and will work with your *ngIf
您的loader
var现在将包含值true
,并将与您的*ngIf
You can use ViewChild component method to call method from one component to another component. 您可以使用ViewChild组件方法将方法从一个组件调用到另一个组件。 Write this code in your NativeExecutiveSummaryComponent
class. 将此代码写入NativeExecutiveSummaryComponent
类。 See below code: 见下面的代码:
@BaseImport.ViewChild(PreloaderComponent)
private preloaderComponent: PreloaderComponent;
this.preloaderComponent.startLoader();
In your NativeExecutiveSummaryComponent's HTML file, you might be having code something like this: 在NativeExecutiveSummaryComponent的HTML文件中,您可能遇到如下代码:
<app-preloader></app-preloader>
Give this tag an Id like this: 为此标记添加如下ID:
<app-preloader #preloaderId></app-preloader>
Then inside your NativeExecutiveSummaryComponent, You can access this element using Viewchild like this: 然后在NativeExecutiveSummaryComponent中,您可以使用Viewchild访问此元素,如下所示:
import {ViewChild} from '@angular/core';
.
.
export class NativeExecutiveSummaryComponent implements OnInit {
@ViewChild('preloaderId') preloaderElement: PreloaderComponent;
ngOnInit() {
this.preloader.startLoader();
}
}
This should solve your problem. 这应该可以解决您的问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.