javascript - 如何从 Angular 7 中的另一个组件更新 View ？

Question

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

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

如果我从 ma​​inView.html 中的 html 元素调用(如 (click)="loadCards()")，它会呈现更新集，但如果相同 ( (click)="refresh()") 在 app.component.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

第一步:使用共享服务

您需要引入管理汽车状态的服务。

在这种情况下，为此引入一个 BehaviorSubject 可能很有用:

您的服务:

private refresh: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);

public getRefresh(): Observable<boolean> {

   return this.refresh.asObservable();
}

public setRefresh(value: boolean): void {

   this.refresh.next(value);
} 

在您的 MainView 类中

• 首先:将您的服务作为依赖项注入(inject)
• 第二:在 OnInit Hook 中订阅您的可观察对象，例如:

this.myService.getRefresh().subscribe((value: boolean) => {
    if(value) {

      this.loadCards()
    }
  
})

在您的 AppComponent 类中

• 首先:将您的服务作为依赖项注入(inject)
• 第二:在刷新方法中设置可观察值的值。

例如:

public refresh(){
    this.myService.setRefresh(true);
}

第二种方式:使用@Input 装饰器向下传递值。