Question

在Angular 2中在本例中，我们使用2个组件-HomeComponent和LoginComponent。我们需要保持代码的可读性并使代码模块化。此外，每个组件都具有特定功能。这样，在组件之间共享数据时，我们在服务成员之间共享数据，并且监视变量是否有任何数据更改。

问题是，对于代码：

this.loginService.profile$.subscribe(
        tempData => {
            this.setProfile(tempData);
        }
    );

从服务器获取数据并将其在HomeComponent中设置为订阅变量- profile $ 后，tempData将具有该值。因此，在更新或更改变量时， this.outputdata 依次使函数doBusinessLogic（）每次都调用，并且该调用使每次变量更改时都对服务器进行调用。这会影响性能。

所以， 1.除了订阅变量以从另一个组件获取数据外，还有其他方法可以解决此问题吗？ 2.如何处理我的手表物品？

角度2-

LoginComponent：login.component.ts

@Component({
        selector: 'login',
        templateUrl: 'app/login.html' })

    export class LoginComponent implements OnInit, OnDestroy {

    //Declaring Variables:

    ngOnInit(){
    //Any other Alternative other than Subscribing the data ?
    this.loginService.profile$.subscribe(
            tempData => {
                this.doBusinessLogic(tempData);
            }
        );

        public doBusinessLogic(data : any){
            //Do Various Business Logic in this function and Do Server Calls.
        }
    }


    }

HomeComponent：home.component.ts

@Component({
        selector: 'home',
        templateUrl: 'app/home.html' })

    export class HomeComponent implements OnInit, OnDestroy {

    //Declaring Variables:

    ngOnInit(){
        this.loadInitData();
    }

    loadInitData(){

        //Fetch Data From Server and stored in variable - loadProfileData;
        const loadProfileData = this.userService.fetchProfileData();
        loadProfileData.map((res: Response) => {
            return res.json();
        })
        .subscribe(
        res => {
            //Set the value in the shared service variable to use it in another Component 
         this.outputdata = res;
            this.loginService.setProfile(this.outputdata);
        });

    }

    }

LoginService：login.service.ts

 @Injectable()
    export class UserService {

        // Observing Admin Business Unit User Profile
        private profileSub = new Subject<any>();
        profile$ = this.profileSub.asObservable();
        profile: any;

        setProfile(userData: any) {
            this.profile = userData;
            this.profileSub.next(userData);
        }
        getProfile() {
            return this.profile;
        }

        fetchProfileData() : Observable<any> {
            //Get Profile Data From Server
        }

    }

编辑：this.outputdata-变量-倾向于根据业务需求进行更改。因此，在更改变量时，这倾向于在“登录组件”中调用服务器调用。但是这里的要点是，对this.outputdata的修改与获取LoginComponent的数据没有任何关系。

组件之间共享数据的替代方法-无需订阅

0 个答案: