Question

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

这是我的路线

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

这是我的routerLink

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

Answer 1

之所以发生这种情况，是因为您在下面添加了代码

app.component.html

12324.134
US: $12,324.13
India: Rs.12,324.13
China: ?12,324.13
France: 12 324,13 ?

所以在这里，当您加载该页面时，该页面即在您的<div> ..... </div> <router-outlet></router-outlet> 标签定义的位置加载

所以我的建议是，不要在router-outlet处添加其他代码。

希望这会有所帮助！

Answer 2

-如果您不熟悉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内容。

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

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

-单击包含routerLink的按钮后，Angular将查找映射到Path的组件。在上面的示例中，securelogin是我的路径，映射到该路径的组件是 SecureloginComponent映射到securelogin HTML页面，然后它将HTML注入到 <router-outlet></router-outlet>动态。

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

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

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

2 个答案: