Как сохранить значение в общем файле и получить такое же значение в другом компоненте в angular 6

Question

Я работаю над проектом, в котором у меня есть раскрывающийся список в одном компоненте (компонент Header), и я назначаю ему значение по умолчанию при вызове API при загрузке первого компонента. Пример: значение = 1

Проблема в том, что когда я изменяю раскрывающееся значение Пример: значение = 2 и пытаюсь перейти к другому компоненту, компонент заголовка загружает каждый икаждый раз, когда я перемещаюсь к любому другому компоненту, поскольку он обычно используется в структуре, и значение снова меняется на присвоенное по умолчанию значение Пример: значение = 1

Я пытался добиться этого, создаваяСервисный файл и используя подписку в нем. И позвони. Но каждый раз, когда я перехожу к другому компоненту, загружается компонент Header, и значение снова изменяется.

Есть ли способ, которым я могу достичь этого.

Answer 1

Я думаю, что ваш основной компонент может иметь неправильную структуру. Если ваш основной компонент содержит HeaderComponent и маршрутизатор, он должен выглядеть примерно так:

<app-header></app-header>
<section>
    <router-outlet></router-outlet>
</section>
<app-footer></app-footer>

Тогда навигация в вашем приложении через Router не должна вызывать повторную визуализацию HeaderComponent.

Если ваш HeaderComponent получает данные в ngOnInit, то их следует создавать только один раз:

@Component({
   selector: 'app-header',
   template: 'header.component.html'
})
export class HeaderComponent implements OnInit {
    myData: [];
    constructor(private myService: MyService) {}

    ngOnInit() {
        this.myService.getData()
            .subscribe(result => this.myData = result);
    }
}