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网址登陆时，我可以看到AppComponent的页面，该页面是使用教程中my-app的演示创建的，无法查看预期的shareloc.component.html。

请忽略我的错误解释，因为我对角度的了解较少。

Answer 1

请检查router-outlet内是否包含标记app.component.html。如果没有错误并且路由工作正常并且只有视图未呈现，则它与视图呈现位置相关。 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>

无法使用角度路由器

1 个答案: