Question

当我尝试使用httml时，我遇到了问题。在URL更改中，但页面本身不可见，根本不响应

路由器插座在dashboard.html中工作

DASHBOARD MODULE

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {DashboardRoutingModule} from './dashboard-routing.module';
import {DashboardComponent} from './dashboard.component';
@NgModule({
  imports: [
    CommonModule,
    DashboardRoutingModule,
    DashboardComponent
   ],
    declarations: [DashboardComponent]
  })
  export class DashboardModule { }

控制板-ROUTING

import { NgModule } from '@angular/core';
import {Routes,RouterModule} from '@angular/router';
import {DashboardComponent} from './dashboard.component';

const dashboard: Routes = [
   {path:'', redirectTo:'dashboard',pathMatch:'full'},
   {path:'',component:DashboardComponent}

  ];

 @NgModule({
  imports: [RouterModule.forChild(dashboard)],
   exports:[RouterModule],
   })
  export class DashboardRoutingModule { }

DASHBOARD COMPONENT

import { Component, OnInit } from '@angular/core';
import { DatabaseService } from '../service/database.service';

@Component({
 selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit {
 username:string;
 constructor(private database:DatabaseService) { }

 ngOnInit() {
    alert('dashboard page');
    this.username = this.database.User.name;
 }
}

Answer 1

您正在重定向到“信息中心”路线，但您没有设置该路线。尝试更改为

{path:'', redirectTo:'dashboard',pathMatch:'full'},
{path:'dashboard',component:DashboardComponent}

第一行会将登陆http://appurl/的用户重定向到http://appurl/dashboard。第二行实际上在该路线上加载了一个组件。

为您的app模块添加bootstrap ..

@NgModule({
  imports: [
    CommonModule,
    DashboardRoutingModule,
    DashboardComponent
   ],
    declarations: [DashboardComponent],
    bootstrap: [DashboardComponent]  <--------
  })
  export class DashboardModule { }

Answer 2

从您粘贴的代码中，如果Dashboard是AppModule，则更改以下行

imports: [RouterModule.forChild(dashboard)],

到

imports: [RouterModule.forRoot(dashboard)],

如果Dashboard是子模块（延迟加载），那么

假设您有App模块（父模块）
在您的应用模块中使用此属性

RouterModule。 forRoot （ROUTES，{ enableTracing：true }）

启用此功能后，请检查浏览器控制台以查找所有路由日志。它将清楚地显示正在加载的路线。

不要在角度5路由中看到html5页面，在仪表板中的url i中

2 个答案: