无法在角度2

Question

当我进入登录页面时，我收到错误“无法读取未定义的属性'路径'。登录页面是与家庭布局分开的模板。然后我创建了login.component.ts as和我的登录页面的auth.component.ts。

但主页工作正常。发生错误只加载单独的登录pag e

这是我的文件夹结构

login.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  constructor() { }
  ngOnInit() { }
}

login.route.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';

import { NoAuthGuard } from '../no-auth-guard.service';
import { AuthComponent } from '../login/auth.component';

export const AUTH_ROUTES: Routes = [
  {
    path: '', component: AuthComponent,// canActivate: [NoAuthGuard]
  },
  {
    path: 'login', component: AuthComponent,// canActivate: [NoAuthGuard]
  },
  {
    path: 'register', component: AuthComponent,// canActivate: [NoAuthGuard]
  }
]

的 login.route.html

<router-outlet></router-outlet>  

auth.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';

import { Errors, UserService } from '../../shared';
import { UserLogin } from '../../shared/models';

@Component({
  selector: 'auth-page',
  styleUrls: ['./auth.component.css'],
  templateUrl: './auth.component.html'
})
export class AuthComponent implements OnInit {
  authLoginForm: FormGroup;
  authRegisterForm: FormGroup;
  
  constructor(private route: ActivatedRoute, private router: Router, private userService: UserService,  private fb: FormBuilder) {
   // use FormBuilder to create a form group   
   -- some code here
   // end use FormBuilder to create a form group
  }

  ngOnInit() {}

  userLogin() { }
  userRegister() {}
}

应用-routing.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';

import { NoAuthGuard } from './auth/no-auth-guard.service';
import { HomeAuthResolver } from './layout/home-auth-resolver.service';

import { LoginComponent, AUTH_ROUTES } from './auth/index';
import {LayoutComponent,  PUBLIC_ROUTES } from './layout/index';

const routes: Routes = [
    { path: 'login', component: LoginComponent,data: { title: 'Public Views' }, children: AUTH_ROUTES },
    { path: 'register', component: LoginComponent,data: { title: 'Public Views' }, children: AUTH_ROUTES },
    { path: '', component: LayoutComponent, data: { title: 'Secure Views' }, children: PUBLIC_ROUTES },
    { path: '**', redirectTo: 'home' }
];

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

Answer 1

此问题在于路由方案的含糊不清。还值得注意的是Routes是一个数组，因此是有序的。按照在该数组中定义的顺序评估路由。

因此，将path: ''中的空路径（login.route.ts）移到AUTH_ROUTES数组中的最后一个位置。