具有多个组件的角度模块在加载时变慢

Question

友.

我找到了一个延迟在Angular 2中启动我的模块的场景.我不是Angular的经验人员.这是我的第一个项目.所以,不知道如何处理这种情况.请任何能解释我的人.

场景: -
我创建了一个小应用程序,其中有各种模块.每个模块都有2-3个子组件.但我的SignUp模块和MyAccount模块是各种组件的混合体.

下面是我的应用程序的层次结构.

app
--Front-end
---- videos
------ Detail
-------- videodetail.component.html
-------- videodetail.component.ts
------列表
-------- list.component.html
-------- list.component.ts
------ videos.component.html
------ videos.component.ts
- ----- videos.routing.ts
------ videos.module.ts
---- article
------ article.component.html
------ article.component.ts
- --front-end.routing.ts
---- front-end.module.ts
---- front-end.component.ts
---- front-end.component.html
--signup
---- stepone
------ stepone.component.html
------ stepone.component.ts
---- steptwo
------ steptwo.component.html
------ steptwo.component.ts
- --- stepthree
------ stepthree.component.html
------ stepthree.component.ts
---- stepfour
------ stepfour.component.html
------ stepfour. component.ts
---- final
------ final.component.html
------ final.component.ts
---- OneMore
------ onemore.component.html
---- --onemore.component.ts
---- signup.module.ts
---- signup.component.ts
---- signup.routing.ts
---- signup.component.html app.module.ts app. component.ts app.compo nent.html app.routing.ts

下面是signup-routing.module.ts孩子的路由代码.

const routes: Routes = [
    { path: '', component: SignupComponent },
    { path: 'terms', component: TermsComponent },
    { path: 'first', component: StepOneComponent },
    { path: 'second', component: SteptwoComponent },
    { path: 'third', component: StepthreeComponent },
    { path: 'third/:status', component: StepthreeComponent },
    { path: 'third/:status/:type', component: StepthreeComponent },
    { path: 'success', component: FinalComponent }

如下所述,是SingupComponent和basecomponent的构造函数

export class BaseComponent implements OnInit  {
    public SiteConfigurations: SiteConfigurations;
    public options: any
    constructor() {
        this.SiteConfigurations = new SiteConfigurations();
        var currentClass= this;
        window["SetDefaultImage"] = function(){}
        window["SetDefaultImage"]=function (event){
          currentClass.SetDefaultImageWithCurrentClass(event,currentClass);
        };
    }

    ngOnInit() {
      //  this.options = Baser
    }

    SetDefaultImageWithCurrentClass(event,currentClass) {
        event.target.src = currentClass.SiteConfigurations.EnvironmentConfigurations.siteURL+"assets/images/no-image.png";
    }
    SetDefaultImage(event) {
      this.SetDefaultImageWithCurrentClass(event,this);
    }
}

export class SignupComponent extends BaseComponent implements OnInit, OnDestroy {
constructor(router: Router, accountService: AccountService) {
    super();
    this.accountService = accountService;
    this.router = router; }

    ngOnInit(): void {
        this.packageType = this.getStepData("packageType");
        this.stepone = this.getStepData("stepone");
        this.steptwo = this.getStepData("steptwo");

        this.options = this.accountService.notificationService.options;
        this.clear = true;
    }
}

下面是我的app-routing.module.ts代码

const routes: Routes = [
    {
        path: '', component: FrontEndComponent,
        children: [
        { path: 'home', loadChildren: './home/home.module#HomeModule' },
        { path: 'videos', loadChildren: './videos/videos.module#VideosModule' },
        { path: 'myaccount', loadChildren: './users/users.module#UsersModule', canActivate: [AuthGuard] },
        { path: 'signup', loadChildren: '../signup/signup.module#SignupModule' }]   
    } 
];

当我运行我的应用程序主页加载时,从主页首次单击SignUp时需要一些时间来执行signup.component.ts的构造函数我发现的原因是在注册模块中有各种子组件获取第一次调用注册模块时(即生成块文件时)加载.AccountModule也存在同样的问题,其中大约8到10个子组件用于在用户帐户仪表板中显示数据.

它在SignUp组件的构造函数和onInit方法被调用之前保持约2-3秒,然后转到服务器端从数据库中获取数据.而其他模块,如视频,文章和休息其他模块只有2个和最多3个子组件,他们正在立即执行.

请任何知道模块/组件及其渲染的确切行为的人都可以帮我解决这个问题.如果我在任何地方错了,请纠正我,或者如果我错过任何信息来更好地描述它,请告诉我.

很想知道获得更多Angular知识的原因和解决方案

Answer 1

请阅读并理解角度延迟加载。以下链接可能会帮助您解决问题。

https://angularfirebase.com/lessons/how-to-lazy-load-components-in-angular-4-in- Three-steps/

https://medium.com/@leekp/lazy-loading-with-angular-4-29c23792b7f4

https://angular-2-training-book.rangle.io/handout/modules/lazy-loading-module.html

正如我所看到的，您的解决方案为每个模块都有路由。您必须在 app-routing.module.ts 上按如下方式加载它们

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'signup', loadChildren: 'sighup/sighup.module#SignUpModule' },
  { path: 'front-end', loadChildren: 'front-end/front-end.module#FrontEndModule' },

];

这将防止在调用注册模块时执行其他模块。

注册路由也可以更改如下。（这取决于您的应用程序）

const routes: Routes = [
    { path: '', component: SignupComponent },
children: [
    { path: 'terms', component: TermsComponent },
    { path: 'first', component: StepOneComponent },
    { path: 'second', component: SteptwoComponent },
    { path: 'third', component: StepthreeComponent },
    { path: 'third/:status', component: StepthreeComponent },
    { path: 'third/:status/:type', component: StepthreeComponent },
    { path: 'success', component: FinalComponent }
]
}

也在signup.components.html中设置注册模块。