How to load ngOninit after binding the api's?

问题

I am trying to load a Crud screen which contains two api's. I want to load the ngonit after loading the two(or more api's).This below code shows the loading of the Rule types. I have similar query for Grouptypes. But I dont want to use the setimeout function for loading the api's..

 public ngOnInit(): void {        
        console.log(this.data);
       

        this.isNew = this.data.isNew;
      
        setTimeout(() => {
           this.getRuleTypes(this.data);
           this.getGroupTypes(this.data);
        }, 1000);

      
        console.log(this.ruleTypeselected );
        console.log(this.groupTypeselected);
        this.title = this.isNew === false ? this.data.title:'';
        this.editForm.reset(this.data.editDataItem);
       
    }
   
    public getRuleTypes(data:any): any{
        this.ruleService.readRuleTypes().subscribe(res=>{
            this.ruleTypes=res;
            if(data.isNew === true){
                this.ruleTypeselected = res[0];
            }  else {
                if (this.ruleTypes[this.ruleTypes.findIndex(s => s.ruleTypeName === data.editDataItem.ruleType)] !== undefined) {
                    this.ruleTypeselected = this.ruleTypes[this.ruleTypes.findIndex(s => s.ruleTypeName === data.editDataItem.ruleType)];
                }
            }          
        });
    }
    public getGroupTypes(data:any): any{
        this.ruleService.readGroupTypes().subscribe(res=>{
            this.groupTypes=res;
            if(data.isNew === true){
                this.groupTypeselected = res[0];
            }  else {
                if (this.groupTypes[this.groupTypes.findIndex(s => s.groupTypeName === data.editDataItem.groupType)] !== undefined) {
                    this.groupTypeselected = this.groupTypes[this.groupTypes.findIndex(s => s.groupTypeName === data.editDataItem.groupType)];
                }
            }          
        });
    }

Kindly help me with better solutions or better way to write the codes.

回答1:

My brother. NgOnInit is not designed for this. This component is for initial setup. If you want to predefined data, use these in the routing, such as resolve for data create before component inited or activate for check permission or navigate to other page.

What is the point of specifying in retrospect what rights the user has? If bot use site, it can click before you define roles within timeout. I don't think that's a good idea.

You can use your service in both:

https://angular.io/api/router/CanActivate
https://angular.io/api/router/Resolve

Purpose of CanActivate goal: "Can I load the component (true, false) or have to navigate to somewhere (UrlTree)?"

Purpose of Resolve: "Before I load the component, what data should I already have?"

Angular will first use "activate" if configured (true by default), and if this is true, it will run "resovle" if configured (empty object by default).

If this is dynamic for you, it can change at any time, then the other respondent’s solution will be good. Not only subscribe, you have to also unsubscribe in ngOnDestroy. Otherwise you will have memory leak. Ofc, if you send complete signal, it will unsubscribe by automatically.

Update for help

If you have to dynamic solution, but I not recommend!

If dynamic I prefer this. Not need unsubscribe, it will automatic. Less chance of error:

回答2:

you can delete your getRuleType and call the service in your NgOnInit

public ngOnInit(): void {        
this.ruleService.readRuleTypes().subscribe(res=>{
            this.ruleTypes=res;
            if(data.isNew === true){
                this.ruleTypeselected = res[0];
            } 
            }          
        });
 }

I suggest strongly the use of observable for a better reactive programming, so If you can adjust so that you can provide obervables to your template, this would let your code look cleaner.

来源：https://stackoverflow.com/questions/64818652/how-to-load-ngoninit-after-binding-the-apis

标签

angular