Как получить доступ к входному значению в нескольких компонентах?

Question

У меня есть 2 компонента: headerComponent и searchPageComponent.
Независимо от значения, которое мы вводим в строке поиска компонента заголовка, компонент страницы поиска должен получить значение.

header.component. html

<form class="form-inline md-form form-sm">
          <input class="form-control form-control-sm mr-3 w-75" id="searchString" type="text" 
             placeholder="Search" [(ngModel)]="searchValue" name="searchString" (ngModelChange)="onChange($event)">
          <button class="headerSearchbarBtn" id="btnSearch" routerLink="/searchResult">
              <span class="headerSearchbarIcon"></span>
           </button>
       </form>

header.component.ts

export class HeaderComponent implements OnInit {
        searchValue: string;
        constructor(private router: Router) { }
        ngOnInit() {
         }
         onChange($event) {
          this.searchValue = $event;
         }
       }

Search.component.ts

export class SearchComponent implements  OnInit {
        ngOnInit() {
          console.log(this.searchValue); // 'this.searchValue' => value should come from header.compomnent.ts 
        }
      }

Здесь нет отношения родитель-потомок, я хочу знать, как данные передаются от одного компонента к другому, и Почему мы не можем напрямую получить доступ к значению поля ввода в различных компонентах в Angular?

Answer 1

Сервис в добавлении этого кода

 setSearchValue = new Subject<any>();
  getSearchValue = this.setSearchValue.asObservable();

Сначала импортируйте вашу Сервис в компоненте Заголовок

constructor(private service: HeaderService)

header.component.ts

export class HeaderComponent implements OnInit {
        searchValue: string;
        constructor(private router: Router) { }
        ngOnInit() {
         }
         onChange($event) {
           this.service.setSearchValue.next(event);
           });
         }
       }

Search.component.ts

export class SearchComponent implements  OnInit {
        ngOnInit() {
         this.getSearchValue();
        }
      }

   getSearchValue(){
      this.service.getSearchValue.subscribe((value) => {
       this.searchValue = value;
      });
    }

Answer 2

Вы можете использовать службу и тему для связи между одноуровневыми компонентами

export class SharedService {

    private searchInputSource = new Subject<string>();

    searchInput = this.searchInputSource.asObservable();

    setSearchInput(value: string) {
        this.searchInput.next(value);
    }
}

export class HeaderComponent implements OnInit {
    searchInput: string;
    constructor(private sharedService: SharedService) { }
    ngOnInit() {
    }
    onChange($event) {
        this.sharedService.setSearchInput.next($event);
    });
}

export class SearchComponent implements OnInit, OnDestroy {

    privates subscription: Subscription;
    searchInput: string;

    ngOnInit(private sharedService: SharedService) {
        this.subscription = sharedService.searchInput.subscribe(
            value => {
                this.searchInput = value;
            });
    }

    ngOnDestroy() {
        this.subscription.unsubscribe();
    }
}

Answer 3

Вам необходимо использовать BehaviorSubject для компонентов без родительских и дочерних отношений. Эта ссылка поможет вам: https://stackblitz.com/edit/angular-behaviorsubject-example?file=src%2Fapp%2Fone%2Fone.component.html