Как получить доступ к логической переменной из одного компонента внутри компонента приложения - Angular - PullRequest
Новая
       113

Как получить доступ к логической переменной из одного компонента внутри компонента приложения - Angular

0 голосов
/ 30 января 2020

У меня есть сценарий, в котором у меня есть несколько страниц, для которых есть значок стрелки назад на уровне приложения во всех формах. Я пытаюсь установить стрелку «назад» в app.component. html как общее для всех форм. Но некоторые формы не имеют стрелку назад. Мне нужно скрыть стрелку назад только для тех форм. Чтобы скрыть стрелку назад для некоторых форм (например, otp.component.ts), я попытался сопоставить имя строки URL-адреса и скрыть стрелку назад, если пользователь достигнет указанной формы c. Это я делаю внутри app.component. Это не работает, так как компонент приложения загружается только один раз при загрузке приложения. Есть ли способ достичь этого сценария.

Может быть, мне нужно сопоставить строку logi c внутри 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;
    }
}

1 Ответ

2 голосов
/ 30 января 2020

Создайте внедренную службу, которая выполняет логи проверки пути c и присваивает свойство внутри службы.

К этому можно получить доступ во всем приложении, внедрив его в конструктор, чтобы вы могли вызывать его из другие компоненты и прочитайте обновленное значение в 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>
...