时间戳

首页 > 解决方案 > 角度路由问题：新页面显示在旧页面下方

angular - 角度路由问题：新页面显示在旧页面下方

问题描述

但是，我正在尝试导航到我的 Angular 应用程序中的新页面。我创建的新页面显示在我的主页下方，即 app.component.ts

这是我的路线

const routes: Routes = [
  { path: '', redirectTo: 'billing-cycle', pathMatch: 'full' },
  { path: 'billing-cycle', component:  AppComponent},
  { path: 'customer-account-docs', component: CustomerAccountDocsComponent }
];

这是我的路由器链接

 <a routerLink='/customer-account-docs'>{{msgFound.value}}</a>

标签： angular

解决方案

-- 如果您是 Angular 新手，请确保您app.component.html只包含类似这样的内容

<app-header></app-header> // this should contain you custom header component
<router-outlet></router-outlet>
<app-footer></app-footer>// this should contain you custom footer component

-- 还要确保您单独获得了主页组件，并且不要将其app.component.html用作您的主页，因为它为您的路由服务。

--The app.component.html应该只包含上面的代码。

-- 你的组件可以只拥有你的静态 html 内容。

-- 然后您可以routerLink="/securelogin"在您的 HTML 中使用 并确保您在 routerLink 中解析的内容是您在app-routing.module.ts文件中配置的内容，例如

{path: 'securelogin', component: SecureloginComponent},
  {path: 'secureregistration', component: SecureregistrationComponent},
  {path: 'forgottenpassword', component: ForgottenpasswordComponent}

-- 一旦你点击了包含 的按钮routerLink，Angular 就会寻找映射到 Path 的那个组件。在上面的示例securelogin中是我的路径，映射到该路径的组件 SecureloginComponent被映射到secureloginHTML 页面，然后它将 HTML <router-outlet></router-outlet>动态注入。

-- 如果你有另一个按钮，routerLink="/forgottenpassword"一旦你点击按钮/链接，Angular 将寻找映射到该路径的组件。在上面的示例forgottenpassword中是我的路径，映射到该路径的组件ForgottenpasswordComponent被映射到forgottenpasswordHTML 页面，然后它将 HTML <router-outlet></router-outlet>动态注入。

注意：如果您按照上述步骤操作，您的页面将独立显示，而不会显示在同一浏览器页面上。

推荐阅读