Question

我是新手，所以请忍受我的格式。

我设置了一个引用Angular's routing guide.的简单路由程序初始显示页面重定向到登录页面，URL：// localhost：4200 /而不是expect：// localhost：4200 / login。

我的index.html中有<base href="./">行，所以我的程序应该正确路由。我的appcomponent模板只包含<router-outlet></router-outlet>的我的每个组件中都有import { Router } from '@angular/router';，而我的自举Appmodule中有import { AppRoutingModule } from './app.routing';。

我的问题是我无法使用某个按钮或直接<a>标签中的routerLink从我的登录屏幕路由到任何其他屏幕。如果我手动更改URL，它会正常运行，并在彼此之间路由其他文件按预期方式工作。我发现，在删除login.component.html中使用的所有<md-input-container>标记后，我的登录显示路由正确，基本URL正确默认为：// localhost：4200 / login。

这是一个错误吗？我不确定为什么md-input-container会影响路由，我仍然觉得很难相信原始错误。我将md-input-container包含的输入插入到已正确路由的其他文件中，并且它们开始以相同的方式行为不端。当然我想使用md-input-container进行格式化和样式化，但它会干扰我打算让我的程序执行的操作。我的login.component.ts显示如下：

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
@Component({
  selector: 'login',
  templateUrl: 'login.component.html',
})
export class LoginComponent implements OnInit {
    loginFailed: boolean;
    ngOnInit(): void {
        this.loginFailed = false;
    }
    LoginAttempt = function () {          
        this.router.navigate('/emp.vision');
    }
    LoginError = function () {
        this.loginFailed = true;
        this.loginErrorMessage = "Invalid username/password";
    }   
}`

我的login.component.HTML：

<md-card class="login-card">
    <md-card-content>
                <img md-card-image src="assets/Img/loginpageIcon.png">
            </div>
            <div style="float:right; width:35%">
                <p></p>

                <b>Employee #:</b>
                <md-input-container>
                    <input mdInput type="text" ng-model="" />
                </md-input-container>

                <b>Password:</b>
                <md-input-container>
                    <input mdInput type="password" ng-model=""/>
                </md-input-container>

                <p></p>
              <a routerLink="/man-vision" routerLinkActive="active">manager page</a>

                <button  md-raised-button color="primary" (click)="LoginAttempt()">
                    <font color="white">Login</font>
                </button>
                
                <button md-raised-button color="accent" (click)="LoginError()">
                    <font color="white"> Cancel </font>
                </button>

    </md-card-content>
</md-card>

我的路由模块：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { LoginComponent } from './login.component';
//import { NewLoginComponent } from './newlogin.component';
import { EmpVisionComponent } from './emp.vision.component';
import { ManVisionComponent } from './man.vision.component';
import { PageNotFoundComponent } from './error.component';



const appRoutes: Routes = [
    {
        path: 'login',            //Login Screen
        component: LoginComponent
    },
  /*{
        path: 'newlogin',
        component: NewLoginComponent
    },*/
    {
        path: 'emp-vision',           //Employee Screen
        component: EmpVisionComponent
    },
    {
        path: 'man-vision',          //Manager Screen
        component: ManVisionComponent
    },
    {
        path: '',                 //Default Route
        redirectTo: 'login',
        pathMatch: 'full'
    },
    { 
        path: '**',
        component: PageNotFoundComponent     //Default Screen
    }
];
@NgModule({
    imports: [RouterModule.forRoot(appRoutes, {useHash: false })],
    exports: [RouterModule],
    providers:[]
})
export class AppRoutingModule{}

Answer 1

当材料成为/ @ angular / cdk的对等依赖项时，此问题已得到修复。

Angular Material Md-Input-Container干扰路由

1 个答案: