Javascript 如何从另一个组件调用函数[角度]

我是新手。这个问题和我的非常相似，但并没有回答我的问题。在我的例子中，这两个组件是独立的，这意味着它们彼此不是父子关系。它们是分开的，并且在同一目录级别。这就是我的问题与其他问题不同的原因。我尝试使用：

@ViewChild（）

@输出（）…事件发射器（）

但是我仍然在

navbar.component.ts中得到一个错误：

错误类型错误：“this.articles未定义”

我的第一个组件是
NavBar
，第二个组件是
Articles

因此，场景是，
pressed（）
method of
NavBar
必须调用
callSearch（arg）
method of
Articles

这是我的navbar.component.ts

import { ..., ViewChild } from '@angular/core';
import { ArticlesComponent } from '../articles/articles.component';

@Component({
  ...
})
export class NavbarComponent implements OnInit {

  text='something';

  @ViewChild(ArticlesComponent, {static: false}) articles: ArticlesComponent;

  constructor() { }

  /*  This method is called on click event from HTML page*/
  pressed(text: string) {
    this.articles.callSearch(text);
  }

  ngOnInit() {
  }
}

import { ... } from '@angular/core';

@Component({
  ...
})
export class ArticlesComponent implements OnInit {

  articles = [];
  filteredArticles=[];

  constructor(...) { }

  ngOnInit() {
    ...
  }

  /*  this is called from navbar typescript and it will call SearchFunction below*/
  callSearch(text: string) {
    this.SearchFunction(text);
  }

  SearchFunction(text: string) {
    this.filteredArticles=(this.articles.filter(e => {
      /* some logic*/
    }));
  }
}

navbar.component.html

<li class="nav-item">
  <button class="btn" (click)="pressed(text)">Search</button>
</li>

<div *ngFor="let article of filteredArticles; let i = index;">
  <div class="card text-center">
    <div class="card-body">
      <!-- card design related html -->
    </div>
  </div>
</div>

articles.component.html

<li class="nav-item">
  <button class="btn" (click)="pressed(text)">Search</button>
</li>

<div *ngFor="let article of filteredArticles; let i = index;">
  <div class="card text-center">
    <div class="card-body">
      <!-- card design related html -->
    </div>
  </div>
</div>



请纠正我

注：这里是。
要与两个互不相关的组件通信，您可以使用服务

    @Injectable({
    providedIn: 'root',
})
export class YourService {

    private yourVariable: Subject<any> = new Subject<any>();


    public listenYourVariable() {
        return this.yourVariable.asObservable();

    }


    private yourVariableObserver(value : type) {
        this.yourVariable.next(value);
    }

在要写入数据调用的组件中：

this.yourService.yourVariableObserver(yourData);

在您希望读取数据的位置：

 this.yourService.listenYourVariable().subscribe(
    variable => {
      this.data = variable;
      this.callyourFunction();
    }

)

显然，您可以在不传递任何值的情况下简单调用函数。
您可以包含组件的html吗？这是否是您的问题“这两个组件是独立的，这意味着它们彼此不是父子关系”-然后
@ViewChild
可能无法工作。您可能希望通过它们的公共父组件（如果它们属于公共父组件）或服务进行通信。确定。我将在这里包括HTML。事实上，我正在尝试创建stackblitz。这对我想的每个人来说都会更容易。下面是你能看到的stackblitz：你可以像我一样创建服务，然后在navBar组件中调用它。yourService.yourVariableObserver（arg）；在文章this.yourService.listenYourVariable（）.subscribe（variable=>{const arg=variable；this.callSearch（arg）}）中，我肯定会给它打一针。我感谢你的帮助。：-）