Question

我有一个用Angular制作的网页，我想动态加载页面的主要内容主体。所以我让我的身体成为一个独立的组成部分并布置了路径，以便我可以路由它。我希望我的应用程序在应用程序启动后立即加载，但首先它的负载太大;）。

<div *ngIf="this.inboundButton" id="maincontainer" class="ScMainContent sticky-ready">
  <div class="sf_cols">
    <div class="sf_colsOut sf_1col_1_100">
      <div id="mainContentPlaceHolder_T15DDBF9D005_COL00" class="sf_colsIn sf_1col-1in-100">

        <p>
          Hello Welcome to my Home Element!
          <br/>
          <a [routerLink]="['/home']" href="">
          it Doesnt Work at All.
          </a>
        </p>
        <router-outlet name="home"></router-outlet>

      </div>
    </div>
  </div>
</div>

我的html中的按钮被放入检查以确保它不需要我的交互加载。它没有。

我的routing.module：

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

import {InboundComponent} from './screens/inbound/inbound.component'
import {OutboundComponent} from './screens/outbound/outbound.component'
import {HomeComponent} from './screens/home/home.component'
import {AppComponent} from './app.component'
import { HeaderComponent } from "app/screens/header/header.component";
import { FooterComponent } from "app/screens/footer/footer.component";

const routes: Routes = [
   {
     path: '',
     redirectTo: 'home',
     pathMatch: 'full'
   },
   {
     path: 'home',
     component: HomeComponent
   },
   {
     path: 'header',
     component: HeaderComponent
   },
   {
     path: 'footer',
     component: FooterComponent
   },
   {
     path: 'inbound',
     component: InboundComponent
   },
   {
     path: 'outbound',
     component: OutboundComponent
   }
 ];

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

文本正确显示所以我知道html加载，但在路由器插座它只是什么都没做。

我已经阅读了几乎所有关于路由的文档，这似乎是正确的......但似乎没有用。

Answer 1

只需更改第一条路线，设置redirectTo：＆＃39; home＆＃39;

$_POST

Answer 2

我认为应该如下所示

{
     path: '',
    children:[
       path:'home',
       component:HomeComponent
]
}

Answer 3

我的回答应该只是一个帮助你的评论。确保

*ngIf="this.inboundButton"

设置为true。

Answer 4

我的解决方案是在 AppComponent 的 ngOnInit() 中激活路由器...

   ngOnInit(): void {
      this.router.navigate(['']);
   }

应用启动时的角度路由

4 个答案: