Question

如上所述，问题已经提出但未找到任何有用的答案，因为问题没有正确地证明问题。

场景/问题： 我正在使用Angular4，我的项目基于Lazy Loading。我有一个登录页面，当我点击我的注册按钮时，我有一个名为“注册”的按钮，它导航到注册模块并运行其组件。我遇到的问题是当我点击注册按钮时我的注册模块正确加载但我的登录模块没有从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中删除所有以前的模块。

以编程方式导航时的角度路由问题，旧组件保留在DOM中而不会破坏

0 个答案: