如何在 angular 的其他组件中使用参数数据

Question

In my app component. I'm having components like

app.component.html

<app-toolbar></app-toolbar>
<app-loader></app-loader>
<router-outlet></router-outlet>

and in my app.component.ts

I'm subscribing data from the query params like

this.route.queryParams.subscribe(params => {
  const { statusBoolean } = params;
  this.myService.status = statusBoolean;
});

here what I'm trying is I'm having a button in my toolbar. whenever the statusBoolean is true in params then I have to display the button in the toolbar.

in myService.ts:

status: boolean;

in my toolbar component:

<button mat-button *ngIf="myService.status"></button>

and I tried by set and get params in service and access the params in toolbar component I'm not getting any values and also by parent-child communication nothing worked. here my toolbar component is loading first and unable to get data from service and throwing undefined. can anyone please help me with this.

Answer 1

I did something similar, I think you can define a service bridge between your toolbar and other components:

@Injectable({
  providedIn: 'root',
})
export class ToolbarService {
  private toolbarComponent: ToolbarComponent = null;

  public registerComponent(component: ToolbarComponent): void {
    this.toolbarComponent = component;
  }

  public setStatus(value: boolean): void {
      if (this.toolbarComponent) {
         this.toolbarComponent.setStatus(value);
      }
  }

}

In tool bar component:

public status: boolean = false;
public ngOnInit(): void {
   this.toolbarService.registerComponent(this)
}

public setStatus(value: boolean): void {
    this.status = value;
    this.changeDetectorRef.detectChanges(); // I think should work without it
}

And you can use toolbarService.setStatus() everywhere

You can also try a simpler solution, declare the status as observable: myService.service.ts

@Injectable({
  providedIn: 'root',
})
export class MyServiceService {
  public status: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);

  public setStatus(value: boolean): void {
     this.status.next(value);
  }
}

And just subscribe to value in toolbar component:

public ngOnInit(): void {
  this.myService.status.subscribe(status => {
    this.status = status;
  });
}

Do not forget to unsubscribe from subscription in ngOnDestroy