Angular 如何访问多个组件中的输入值？

我有两个组件：headerComponent和searchPageComponent。
无论我们在header组件搜索栏上输入什么值，搜索页面组件都应该获得该值

header.component.html

Search.component.ts

这里没有父子关系，我想知道数据是如何从一个组件传递到另一个组件的，

---

为什么我们不能直接访问Angular中不同组件中的输入字段框值？

服务添加此代码

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

---

您需要在没有父关系和子关系组件的情况下使用BehaviorSubject。

---

此链接将对您有所帮助：

您可以使用服务和主题在同级组件之间进行通信

export class SharedService {

    private searchInputSource = new Subject<string>();

    searchInput = this.searchInputSource.asObservable();

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

---

检查此项：此项有效，但subscibe不是第一次返回值（它不是更新值-this.searchValue=value；），如果我在输入字段中再次输入一些值，则仅返回值。@PavanRT请在stackblitz和共享链接中添加代码。我已在此处更新代码---@Vijay Prajapati

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

 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;
      });
    }

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();
    }
}