簡體   English   中英

如何從角度2中的另一個組件調用組件方法?

[英]how to call a component method from another component in angular 2?

我在我的angular 2應用程序中有兩個組件,並且在其中一個包含兩種語言的md-select中。 選擇一種語言后,我想更改整個項目方向。

這是我的component1.html的一部分:

<md-select class="data_font"  [(ngModel)]="currentLang" #langSelect="ngModel" (ngModelChange)="translate.use(currentLang)">
            <md-option *ngFor="let lang of translate.getLangs()" [value]="lang"><span class="data_font">{{ lang }}</span></md-option>
</md-select>

這是component2.html的一部分:

<div #root="$implicit" dir="rtl" >
   ...//some html code here
</div>

和component2.ts的一部分

currentLang = 'fa';
@ViewChild('root') root;
ngAfterViewInit(): void {
    this.root.dir = 'rtl';
  }
RTL(){
    if(this.currentLang == 'fa'){
      this.root.dir = 'rtl';
    }
    if(this.currentLang == 'en'){
      this.root.dir = 'ltr';
    }
  }

我可以更改存在root和dir的方向,但我想從組件1進行操作。我該怎么辦?有什么方法可以在component1中調用RTL()?

對於您的情況,您可以創建一個服務,並在該服務中保持對語言的可觀察性... Observable將幫助您在任何時間點訂閱屬性值的更改...並且您可以根據以下內容更改功能您可以維護屬性的當前值。...+單擊鏈接以了解有關可觀察對象的更多信息: https : //toddmotto.com/rxjs-observables-observers-operators

基本上,如果您的兩個組件需要共享相同的功能或數據,則應將該功能作為屬性或方法轉換為服務...例如,假設您有一個購物車下拉菜單(組件),用戶可以在其中增加或減少由於兩個組件共享相似的功能,因此最終添加的產品數量和相同的功能將提供給用戶或訂單確認頁面(另一個組件)...應創建一個服務,該服務可以處理來自任何組件的任何請求以處理購物車事件。 希望這個例子會有所幫助。

如果您的組件1調用組件2或相反的組件,則可以使用ViewChild,因為該組件之一將是子組件。 如果您的組件處於同一級別或位於兩個不同的組件上,則可以使用注入到兩個組件構造函數中的服務來交換數據。 一個呼叫服務,另一個呼叫數據

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM