Question

我刚刚开始有角度的项目。我创建了只有两个打印内容的新组件universal-table.component要控制台，但似乎没有调用该组件。当我转到http://localhost:4200/model也不填充浏览器日志时，HTML未加载到浏览器中，但是我可以在Firefox的“调试”标签中看到UniversalTableComponent_Host.ngfactory.js。

组件：

import { Component, OnInit } from '@angular/core';
import {UniversalTable} from "./universal-table.model";

@Component({
  selector: 'app-universal-table',
  templateUrl: './universal-table.component.html',
  styleUrls: ['./universal-table.component.css']
})
export class UniversalTableComponent implements OnInit {
  private model: UniversalTable;

  // public universalTable: Field = new Field();

  constructor() {
    console.log("1");
  }

  ngOnInit() {
    console.log("2");
  }
}

路由器：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { UniversalTableComponent } from './universal-table/universal-table.component';


const routes: Routes = [
  {path: 'model', component: UniversalTableComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Answer 1

在app.component.html中，您必须添加：

<app-universal-table></app-universal-table>

这是调用根元素。

Answer 2

应在您的 app.component.html 中放置

<router-outlet></router-outlet>

这是呈现组件的位置。

角组件未调用

组件：

路由器：

2 个答案: