Angular 2中的同級組件之間的數據共享

我正在開發Angular 2應用程序，其中模塊內有兩個組件。兩個模塊都是獨立的，沒有父子關係。第一個組件收集用戶需要傳遞給第二個組件的一些數據。Angular 2中的同級組件之間的數據共享

成分I：

@Component({ 
    selector: 'user-otp-generation', 
    templateUrl: `../partials/user-management/user-generate-otp.html`, 
    moduleId: module.id, 
    // providers: [UserService] 
}) 

export class UserOtpGenerationComponent{ 
constructor(private UserService: UserService) { } 

user: User = new User(); 

onSubmit(){ 
    this.UserService.generateOTP(this.user.phone) 
     .then(response => { 
       this.UserService.setUserProperty('phone', this.user.phone); //From user input 
       this.UserService.setUserProperty('otp', response.otp); //From API response 
      }) 
    } 
}

組分II：

@Component({ 
    selector: 'user-authentication', 
    templateUrl: `../partials/user-management/user-authentication.html`, 
    moduleId: module.id, 
    // providers: [UserService] 
}) 

export class UserAuthenticationComponent { 
    constructor(private UserService: UserService) { 
     this.user = UserService.getUser(); 
    } 

    user:User; 

    onSubmit(){ 
     this.UserService.verifyOTP(this.user.otp) 
      .then(response => { //Do something }) 
    } 
}

由於這兩種成分在同級的水平，我想用數據共享服務是一個不錯的辦法。所以，我創建了數據服務UserService。此外，User只是一個模型類，它有許多與用戶實例相對應的字段。

用戶類

export class User { 
    phone: string; 
    otp: string; 
    reference_id: string; 
    // Many other similar fields 
}

UserService

@Injectable() 
export class UserService { 
    private user: User = new User(); 

    getUser(){ 
     return this.user; 
    } 

    setUserProperty(key, value){ 
     this.user[key] = value; 
    } 

    generateOTP(phone: string): Promise<any>{ 
     return this.http.get('some-url').toPromise(); 
    } 
}

沒有父組件。這些組件是具有路由如下用戶模塊內：

const userRoutes: Routes = [ 
    {path: '', redirectTo: 'generate-otp', pathMatch: 'full'}, 
    {path: 'generate-otp', component: UserOtpGenerationComponent}, 
    {path: 'authenticate', component: UserAuthenticationComponent} 
]

我加入在服務級別屬性user。在組件I內部，我創建了一個user屬性，其值最終用於修改服務user屬性，以便在組件II中可訪問該屬性。在組件II實例化過程中，我使用服務用戶屬性初始化其用戶屬性。但是，這次我用空的對象作爲用戶。我在user.module的NgModule中註冊了providers: [UserService]服務。如果我在兩個組件的級別註冊，都會發生同樣的問題。什麼是問題？

來源

2017-05-03 Aosis

似乎像UserService正在實例化兩次;每個組件一次。我需要它僅實例化一次，以便可以在組件之間共享數據。 – Aosis

請發佈'user.module'和你的'app.module'。另外，向服務添加一個構造函數，並在其中添加一條日誌語句以確保它已被多次實例化。 –

我通過https://embed.plnkr.co/FQGDe1gbSI5speWFLDLl/創建了一個plnkr。這是工作，但相同的代碼不能在我的本地機器上工作。我使用了Angular quickstart種子（https://github.com/angular/quickstart）並添加了我的代碼。它不工作。然而，有趣的是，如果我使用Angular CLI並添加我的代碼，它將再次正常工作。有什麼理由？ – Aosis

我找不到這個問題的正確答案。但是，從上面的評論中可以看出，當我在一個plunker中嘗試它時，代碼工作正常，或者我使用Angular CLI 1.0.2。早些時候，我使用快速啓動種子。正如@Ahmed Musallam建議的那樣，我在服務中使用了console.log語句，當然，服務被實例化了兩次。我現在使用angular-cli。這是我能想出的唯一解決方案。

來源

2017-05-05 02:57:06 Aosis

Angular 2中的同級組件之間的數據共享

回答

相關問題