角组件未调用

时间:2019-11-12 12:34:50

标签: angular angular-router

我刚刚开始有角度的项目。我创建了只有两个打印内容的新组件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 { }

2 个答案:

答案 0 :(得分:0)

在app.component.html中,您必须添加:

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

这是调用根元素。

答案 1 :(得分:0)

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

<router-outlet></router-outlet>

这是呈现组件的位置。