亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何從 Angular 7 中的另一個組件更新視圖?

如何從 Angular 7 中的另一個組件更新視圖?

陪伴而非守候 2021-09-17 10:21:26
我想從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,現在我可以從其他組件刷新內容。謝謝大家的快速回復。
查看完整描述

3 回答

?
翻過高山走不出你

TA貢獻1875條經驗 獲得超3個贊

第一種方式:使用共享服務


您需要引入一項管理汽車狀態的服務。


在這種情況下,引入這樣的 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 向下傳遞值。


查看完整回答
反對 回復 2021-09-17
?
慕工程0101907

TA貢獻1887條經驗 獲得超5個贊

可以通過兩種方式實現組件交互

(i) 如果組件彼此相關,則使用共享數據的通用且直接的方法。它通過使用@Input()裝飾器來允許數據通過模板傳遞。

(ii) 如果組件彼此不相關,您可以communicate在兩個組件之間使用共享服務


查看完整回答
反對 回復 2021-09-17
?
守著星空守著你

TA貢獻1799條經驗 獲得超8個贊

可以通過兩種方式實現組件交互

(i) 如果組件彼此相關,則使用共享數據的通用且直接的方法。它通過使用@Input()裝飾器來允許數據通過模板傳遞。

(ii) 如果組件彼此不相關,您可以communicate在兩個組件之間使用共享服務


查看完整回答
反對 回復 2021-09-17
  • 3 回答
  • 0 關注
  • 202 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號