0

重复问题： 是的。这里是。

由于之前已经提出过上述问题，但由于问题没有正确说明问题，因此没有找到任何有用的答案。

场景/问题： 我正在使用 Angular4，我的项目基于延迟加载。我有一个登录页面，其中有一个名为“Register”的按钮，当我单击我的注册按钮时，它导航到注册模块并运行其组件。我面临的问题是当我单击注册按钮时，我的注册模块正确加载但我的登录模块没有从 DOM 中删除并且存在于同一页面上。

以下是我点击注册按钮之前的屏幕截图： 在此处输入图像描述

以下是我点击注册按钮后的屏幕截图： 在此处输入图像描述

下面是我的文件夹结构：

在此处输入图像描述

下面是我的 app-routing.module.ts：

const routes: Routes = [
    {
        path: '', 
        pathMatch: 'full',
        component: AppComponent
    },
    {
        path: 'login', pathMatch: 'full',
        data: { gotoLogin: true },
        canActivate: [ AuthService ],
        loadChildren: './modules/login/login.module#LoginModule'
    },
    {
        path: 'register', pathMatch: 'full',
        data: { gotoRegister: true },
        canActivate: [ AuthService ],
        loadChildren: './modules/register/register.module#RegisterModule'
    }
    {
        path: 'dashboard',
        data: { requiresLogin: true },
        canActivate: [ AuthService ],
        loadChildren: './modules/dashboard/dashboard.module#DashboardModule'
    },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

下面是我的 login.component.ts：

constructor(
    private _fb: FormBuilder,
    private _Router: Router, 
    private _User: UserService,
    public toastr: ToastsManager, vcr: ViewContainerRef) { 
      this.toastr.setRootViewContainerRef(vcr);
      this.UserForm =  _fb.group({
          "_Username" : ['', Validators.required],
          "_Password" : ['', Validators.required]
    });

    if (this._User.IsUserLoggedIn()) {
        this._Router.navigate(['/dashboard']);
    } 
    else {
        this._Router.navigate(['/login']);
    }
}

ngOnInit() {
    if (this._User.IsUserLoggedIn()) {
        console.log('User successfully loggedin.')
        this._Router.navigate(['/dashboard']);
    }
}

navigate() {
    this._Router.navigate(['/register']);
}

下面是我的 login.component.html：

<button class="btn btn-warning" type="button" (click) = "navigate()">Register</button>

下面是我的 login.router.ts

const routes: Routes = [
    {
        path: '', pathMatch: 'full',
        component: LoginComponent
    }
];

@NgModule({
    imports: [
    RouterModule.forChild(routes),
    FormsModule,
    ReactiveFormsModule
],
    declarations: [LoginComponent],
    exports: [RouterModule]
})
export class LoginRouter { }

下面是我的 app.component.html

<router-outlet></router-outlet>

下面是我的 app.component.ts

export class AppComponent {
title = 'app works!';


constructor(
    private _Router: Router) {
    this._Router.navigate(['/login']);
}

ngOnInit() {
}

}

我希望我提供有关我的问题的简要信息。现在我想要的是当我点击注册按钮并导航到注册模块时，只有注册模块会打开并从 DOM 中删除所有以前的模块。

4

0 回答 0