Question

我正在学习使用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() {
  }

}

我的登录组件类似，我的三个组件显示相同：

ASDASDASDAS

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

-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来分离视图吗？

非常感谢任何帮助!!

Answer 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>

您可以阅读更多http://mattsnider.com/git-rebase-versus-git-pull/。

Angular 4不显示我的组件视图

1 个答案: