无法使用 angular 路由器加载 html 页面

Question

我试图将我的 html 页面之一集成到 Angular-Quickstart 的演示 my-app 中。我有静态 html 页面 shareloc.component.html 和指定的路由器来加载它。

这是我的 app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from './app.component';
import { ShareLocComponent } from './shareloc.component';

const appRoutes: Routes = [
  { path: 'locsharing/:id', component: ShareLocComponent }
];

@NgModule({
  declarations: [
    ShareLocComponent,
    AppComponent,
  ],
  imports: [
    BrowserModule
    ,RouterModule.forRoot(
      appRoutes,
      { enableTracing: true } // <-- debugging purposes only
    )
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

shareloc.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-container',
  templateUrl: './shareloc.component.html',
  styleUrls: ['./css/shareloc.css']
})

export class ShareLocComponent {
  constructor(){
    console.log('Suresh here!');
  }
  title = 'My First Angular App';
}

在http://localhost:4200/locsharing/1 URL登陆时，我可以看到使用教程中my-app的演示创建的AppComponent页面，但无法查看预期的shareloc.component.html.

请忽略我的错误解释，因为我对 angular.

了解较少

Answer 1

请检查您是否在 app.component.html 中包含了标签 router-outlet。如果没有错误并且路由工作正常并且只有视图没有渲染那么它与视图渲染位置有关。 RouterOutlet 是一个 placeholder 组件，它扩展到每个路由的内容。

所以你的 app.component.html 应该有 router-outlet 标签，例如

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
 <h1>
   Welcome to {{ title }}!
 </h1>
 <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
 <li>
   <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
 </li>
 <li>
   <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
 </li>
 <li>
   <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
 </li>
</ul>
<router-outlet></router-outlet>

无法使用 angular 路由器加载 html 页面

Not able to load html page using angular router

angular

angular4-router