如何从 Angular 7 中的另一个组件更新视图？

Question

我想从app.component.html一部分的导航栏刷新我的卡片集，所以我准备了refresh()函数。

当它被调用时，它会更新变量 Cards 但不会在mainView.html的 html 元素上的ngFor 中呈现它。

如果我从mainView.html 中的html 元素调用（如(click)="loadCards()"），但如果在app.component 中完成相同的（(click)="refresh()"），它会呈现更新的集合。 HTML。

export class MainView implements OnInit {

  constructor(private mMainController: MainController) {}

  Cards: any = [];

  ngOnInit() {

    this.loadCards();

  }

  loadCards() {

    this.mMainController.getAllCards().subscribe(

      (data) => {this.Cards = data); },

      (error) => {},

      () => {console.log(this.Cards));

  }

...

}

export class AppComponent {

  ...

  constructor(private router: Router, private mMainView: MainView) {}

  refresh(){

    console.log('done');

    this.mMainView.loadCards();

  }

  ...

}

更新

尝试使用 @Input() 但无法正常工作。我按照接受的答案中的说明实现了 RefreshService，现在我可以从其他组件刷新内容。

谢谢大家的快速回复。

Answer 1

第一种方式：使用共享服务您需要引入一项管理汽车状态的服务。在这种情况下，引入这样的 a 可能会很有用BehaviorSubject：您的服务：private refresh: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);public getRefresh(): Observable<boolean> {&nbsp; &nbsp;return this.refresh.asObservable();}public setRefresh(value: boolean): void {&nbsp; &nbsp;this.refresh.next(value);}&nbsp;在您的 MainView 类中 - 首先：将您的服务作为依赖项注入 - 其次：在 OnInit 钩子中订阅您的可观察对象，例如：this.myService.getRefresh().subscribe((value: boolean) => {&nbsp; &nbsp; if(value) {&nbsp; &nbsp; &nbsp; this.loadCards()&nbsp; &nbsp; }})在您的 AppComponent 类中第一：将您的服务作为依赖项注入第二：在你的 refresh 方法中设置你的 observable 的值。例如这样的事情：public refresh(){&nbsp; &nbsp; this.myService.setRefresh(true);}第二种方式：使用@Input Decorator 向下传递值。

Answer 2

可以通过两种方式实现组件交互(i) 如果组件彼此相关，则使用共享数据的通用且直接的方法。它通过使用@Input()装饰器来允许数据通过模板传递。(ii) 如果组件彼此不相关，您可以communicate在两个组件之间使用共享服务

Answer 3

可以通过两种方式实现组件交互(i) 如果组件彼此相关，则使用共享数据的通用且直接的方法。它通过使用@Input()装饰器来允许数据通过模板传递。(ii) 如果组件彼此不相关，您可以communicate在两个组件之间使用共享服务