如何从 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> {

   return this.refresh.asObservable();

}

public setRefresh(value: boolean): void {

   this.refresh.next(value);

} 

在您的 MainView 类中 - 首先：将您的服务作为依赖项注入 - 其次：在 OnInit 钩子中订阅您的可观察对象，例如：

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

    if(value) {

      this.loadCards()

    }

})

在您的 AppComponent 类中

第一：将您的服务作为依赖项注入

第二：在你的 refresh 方法中设置你的 observable 的值。

例如这样的事情：

public refresh(){

    this.myService.setRefresh(true);

}

第二种方式：使用@Input Decorator 向下传递值。

Answer 2

可以通过两种方式实现组件交互

(i) 如果组件彼此相关，则使用共享数据的通用且直接的方法。它通过使用@Input()装饰器来允许数据通过模板传递。

(ii) 如果组件彼此不相关，您可以communicate在两个组件之间使用共享服务

Answer 3

可以通过两种方式实现组件交互

(i) 如果组件彼此相关，则使用共享数据的通用且直接的方法。它通过使用@Input()装饰器来允许数据通过模板传递。

(ii) 如果组件彼此不相关，您可以communicate在两个组件之间使用共享服务