Question

我正在努力整理一个多步骤的表格。我在这里使用说明作为指导：

https://www.cc28tech.com/angular-multi-step-wizard-part-1/

我正在使用Angular 5。

截至目前，我正在进行一项测试，主要HTML组件admin-reg-ques调用一个子坐标HTML组件ques-navbar。

当我输入：http://localhost:4200/admin/admin-reg-ques

时

我收到以下错误：

VM6056 core.js:1624 ERROR Error: Uncaught (in promise): Error: Template parse errors:
'app-ques-navbar' is not a known element:
1. If 'app-ques-navbar' is an Angular component, then verify that it is part of this module.
2. If 'app-ques-navbar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
  <div style="background:white">
      <h1>stuff is in here</h1>
      [ERROR ->]<app-ques-navbar></app-ques-navbar>
  </div>
</body>"): ng:///AuthAdminModule/AdminRegQuesComponent.html@3:6
Error: Template parse errors:
'app-ques-navbar' is not a known element:
1. If 'app-ques-navbar' is an Angular component, then verify that it is part of this module.
2. If 'app-ques-navbar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
  <div style="background:white">
      <h1>stuff is in here</h1>
      [ERROR ->]<app-ques-navbar></app-ques-navbar>
  </div>
</body>"): ng:///AuthAdminModule/AdminRegQuesComponent.html@3:6

文件结构如下图所示：

问题：我做错了什么？

疑问句-navbar.component.html

<h1>navigation bar goes here </h1>

疑问句-navbar.component.ts

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


@Component({
  selector: 'app-ques-navbar',
  templateUrl: './ques-navbar.component.html',
  styleUrls: ['./ques-navbar.component.css']
})
export class QuesNavbarComponent implements OnInit {

  // need for work with the Template = do not erase!
  ngAfterViewInit() { document.getElementById('preloader').classList.add('hide'); }

  constructor() { }

  ngOnInit() {
  }    
}

管理-REG-ques.component.ts

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

@Component({
  selector: 'app-admin-reg-ques',
  templateUrl: './admin-reg-ques.component.html',
  styleUrls: ['./admin-reg-ques.component.css']
})
export class AdminRegQuesComponent implements OnInit {

  // need for work with the Template = do not erase!
  ngAfterViewInit() { document.getElementById('preloader').classList.add('hide'); }


  constructor() { }

  ngOnInit() {
  }
}

管理-REG-ques.component.html

<body style="background-color: white">
  <div style="background:white">
      <h1>item is in here</h1>
      <app-ques-navbar></app-ques-navbar>
  </div>
</body>

特别注意

如果我将 admin-reg-ques.component.html 更改为以下内容，则不会收到错误消息：

<body style="background-color: white">
  <div style="background:white">
      <h1>item is in here</h1>
      <!-- <app-ques-navbar></app-ques-navbar> -->
  </div>
</body>

管理-REG-ques.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { QuesMainComponent } from './ques-main/ques-main.component';
import { QuesDoneComponent } from './ques-done/ques-done.component';
import { QuesAddressComponent } from './ques-address/ques-address.component';
import { QuesNavbarComponent } from './ques-navbar/ques-navbar.component';
import { QuesWorkflowComponent } from './ques-workflow/ques-workflow.component';
import { AdminRegQuesComponent } from './admin-reg-ques.component';

export const routes = [
  { path:'', redirectTo:'admin-reg-ques', pathMatch:'full' },
  { path: 'admin-reg-ques', component: AdminRegQuesComponent, pathMatch: 'full' },
 ];

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [QuesMainComponent, QuesDoneComponent, QuesAddressComponent, QuesNavbarComponent, QuesWorkflowComponent]
})
export class AdminRegQuesModule { }

Answer 1

如果模块AdminRegQuesModule由另一个需要渲染QuesNavbarComponent的模块导入，则需要将其导出到AdminReqQuesModule。

@NgModule({
   imports: [
       CommonModule
   ],
   declarations: [QuesMainComponent, QuesDoneComponent, QuesAddressComponent, QuesNavbarComponent, QuesWorkflowComponent],
   exports: [QuesMainComponent, QuesDoneComponent, QuesAddressComponent, QuesNavbarComponent, QuesWorkflowComponent]
})
export class AdminRegQuesModule { }

这应该使您的组件在其他模块中可见。

从错误中可以看出，有AuthAdminModule的引用。您是否尝试在此模块中注入组件？

错误：未捕获（在承诺中）：错误：模板解析错误：'app-ques-navbar'不是已知元素：

1 个答案: