如何从应用程序组件中的一个组件访问布尔变量 - Angular

Question

我有一个场景，其中我有多个页面，所有表单的应用程序级别都有返回箭头图标。 我正在尝试将 app.component.html 中的后退箭头设置为所有表单中的通用。但有些表格没有后退箭头。我只需要为这些表格隐藏后退箭头。 为了隐藏某些表单的后退箭头（例如 otp.component.ts），我尝试匹配 url 字符串名称，并在用户到达该特定表单时隐藏后退箭头。这是我在 app.component 里面做的。这不起作用，因为应用程序组件仅在加载应用程序时加载一次。有没有办法实现这种情况。

可能我需要匹配 otp.component.ts 中的字符串逻辑并将布尔值传递给 app.component.html。但我不确定如何实现这一点。

非常感谢您对此的任何帮助。谢谢。

app.component.html :

 <button class="header_back" *ngIf="showBackIcon" (click)="goBack()"></button>
    <button class="header_close" *ngIf="showCloseIcon" (click)="close()"></button>

app.component.ts:
 constructor() {
    const urlPath = window.location.href; 
    if (urlPath.indexOf("/otp") > -1) {
      this.showCloseIcon=true;
      this.showBackIcon=false;
    } else {
      this.showCloseIcon=false;
      this.showBackIcon=true;
    }
}

Answer 1

创建一个执行路径检查逻辑并分配给服务内属性的注入服务。

然后可以通过注入构造函数在整个应用程序中访问它，以便您可以从其他组件调用它并读取 app.component 中的更新值，例如this.backArrowService.showBackIcon

新服务 back-arrow.service.ts:

@Injectable()
export class BackArrowService {
public showBackIcon: boolean;
//etc

任何组件：

import { BackArrowService } from './back-arrow.service.ts';
...
constructor(public backService: BackArrowService ) {}

/*Example of directly updating value of service property which can be accessed 
from other components that inject the service also*/
...
ngOnInit() {
this.backService.showBackIcon = true;
}

应用组件html：

//See the value change:
{{backService.showBackIcon}}

<button class="header_back" *ngIf="backService.showBackIcon" (click)="goBack()"></button>