角度材料 md-input-container 会干扰路由

Question

我是新手，所以请耐心等待我的格式。

我设置了一个简单的路由程序，引用了Angular的路由指南。 初始显示页面重定向到登录页面，网址为 ：//本地主机：4200/而不是预期的 ：//本地主机：4200/登录 .

我的索引.html中有行<base href="./">，所以我的程序应该正确路由。我的应用程序组件模板仅包含<router-outlet></router-outlet>我的每个组件都有import { Router } from '@angular/router';，我的引导应用程序模块中import { AppRoutingModule } from './app.routing';。

我的问题是我无法使用某些按钮中的routerLink或直接<a>标签从登录屏幕路由到任何其他屏幕。如果我手动更改 URL，它会正常工作，并且在彼此之间路由其他文件按预期工作。我发现，在删除我的login.component.html中使用的所有<md-input-container>

标签后，我的登录显示路由正确，基本URL正确默认为：//localhost：4200/login。这是一个错误吗？我不确定为什么 md-input-container 会影响路由，我仍然很难相信原始错误。我在其他正确路由的文件中插入了一个由 md-input-container 封装的输入，它们开始以相同的方式运行不正常。当然，我想使用 md-input-container 进行格式化和样式设置，但它会干扰我打算让我的程序做什么。 显示我的登录名.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";
}   
}`

还有我的登录名组件.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 的对等依赖项时，此问题已修复。