Angular 4 不显示我的组件视图答案

【问题标题】：Angular 4 doesnt display my components viewsAngular 4 不显示我的组件视图
【发布时间】：2017-12-31 15:28:11
【问题描述】：

我正在学习使用 Angular 4，但我无法渲染超过 1 个模板，我的起始 App 模板还可以，并且渲染得很好，但后来我用“ng g component newComponent”创建了另外 2 个组件，但我没有能够让他们显示任何东西。我可以在浏览器中键入新组件的 URL，它可以正常导航而不会出错，但它总是显示 app.component.html 我的文件是这样的：

app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<p>
  ASDASDASDAS
</p>

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less']
})
export class AppComponent {
}

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 { LoginComponent } from './login/login.component';
import { DashboardComponent } from './dashboard/dashboard.component';

const appRoutes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: 'dashboard', component: DashboardComponent }
];

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    DashboardComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: true }
    )
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

dashboard.component.html

<p>
  dashboard works!
</p>

dashboard.componentspec.ts

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { DashboardComponent } from './dashboard.component';

describe('DashboardComponent', () => {
  let component: DashboardComponent;
  let fixture: ComponentFixture<DashboardComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ DashboardComponent ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(DashboardComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should be created', () => {
    expect(component).toBeTruthy();
  });
});

dashboard.component.ts

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

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.less']
})
export class DashboardComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

我的登录组件类似，我的三个组件显示的一样：

阿斯达斯达斯

我不知道我的问题出在哪里，我在任何控制台中都没有错误消息。我的项目结构是：

-src
--app
---dashboard
----dashboard.component.html
----dashboard.component.less
----dashboard.component.spec.ts
----dashboard.component.ts
---login
----login.component.html
----login.component.less
----login.component.spec.ts
----login.component.ts
--app.component.html
--app.component.less
--app.component.spec.ts
--app.component.ts
--app.module.ts

我是否需要不同的 NgModule 来实现完全分离的视图？我的意思是我想要一个带有“登录”的页面，另一个用于“仪表板”，另一个用于 idk，一个新页面......等等，每个人都需要一个 NgModule 来分离视图？

非常感谢任何帮助！

【问题讨论】：

你的 app.component.html 中有 <router-outlet></router-outlet> 吗？
不，你能告诉我应该如何构建 app.component.html 吗？

标签： javascript angular

【解决方案1】：

您应该将<router-outlet></router-outlet> 放入app.component.html 以定义将呈现其他组件的位置。

app.component.html 内容示例：

<div class="app">
  <app-header></app-header>

  <router-outlet></router-outlet>

  <app-footer></app-footer>
</div>

您可以阅读更多here。

【讨论】：