昨天我完成了我的一个项目页面"home.Component"的工作,今天当我想使用其他页面上的一些组件但它们不起作用时,唯一起作用的是"home"和app.Component.html. 其他错误:

ERROR
src/app/pages/sign-in/sign-in.component.html:2:1 - error NG8001: 'app-header' is not a known element:
1. If 'app-header' is an Angular component, then verify that it is part of this module.
2. If 'app-header' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

2 <app-header></app-header>
  ~~~~~~~~~~~~

  src/app/pages/sign-in/sign-in.component.ts:5:16
    5   templateUrl: './sign-in.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component SignInComponent.

我的文件夹遵循以下顺序:

-- /src
|-- /app
| | -- /core
| | | -- /components
| | | | -- /header
| | | | | -- /header.component.css
| | | | | -- /header.component.html
| | | | | -- /header.component.ts
| | | |
| | | | -- /slider
| | | | | -- /slider.component.css
| | | | | -- /slider.component.html
| | | | | -- /slider.component.ts
| | | 
| | | -- /pages
| | | | -- /home
| | | | | -- /home.component.css
| | | | | -- /home.component.html
| | | | | -- /home.component.ts
| | | |
| | | | -- /sign-in
| | | | | -- /sign-in.component.css
| | | | | -- /sign-in.component.html
| | | | | -- /sign-in.component.ts

header.component.ts

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

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent {
  title = 'travel-blog';
}

home.component.ts

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

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent {
  title = 'travel-blog';
}

home.component.html

<app-header></app-header>
/*a bunch of code about this site*/
<app-slider></app-slider>
<app-footer></app-footer>

sign-in.component.ts

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

@Component({
  selector: 'app-sign-in',
  templateUrl: './sign-in.component.html',
  styleUrls: ['./sign-in.component.css']
})
export class SignInComponent {
  title = 'travel-blog';
}

app.module.ts

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ContactFormComponent } from './core/components/contact-form/contact-form.component';
import { FooterComponent } from './core/components/footer/footer.component';
import { HeaderComponent } from './core/components/header/header.component';
import { SliderComponent } from './core/components/slider/slider.component';
import { AboutUsComponent } from './pages/about-us/about-us.component';
import { AsiaComponent } from './pages/asia/asia.component';
import { EuropeComponent } from './pages/europe/europe.component';
import { ItalyComponent } from './pages/europe/italy/italy.component';
import { SpainComponent } from './pages/europe/spain/spain.component';
import { HomeComponent } from './pages/home/home.component';
import { LastBlogsComponent } from './pages/last-blogs/last-blogs.component';
import { PatreonComponent } from './pages/patreon/patreon.component';
import { SignInComponent } from './pages/sign-in/sign-in.component';
import { SignUpComponent } from './pages/sign-up/sign-up.component';

const appRoutes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'sign-in', component: SignInComponent },
  { path: 'sign-up', component: SignUpComponent },
  { path: 'spain', component: SpainComponent },
  { path: 'italy', component: ItalyComponent },
  { path: 'europe', component: EuropeComponent },
  { path: 'asia', component: AsiaComponent },
  { path: 'last-blogs', component: LastBlogsComponent },
  { path: 'patreon', component: PatreonComponent },
  { path: 'about-us', component: AboutUsComponent },
]

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    SliderComponent,
    ContactFormComponent,
    FooterComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    RouterModule.forRoot(appRoutes),
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }

app.component.html

<router-outlet></router-outlet>

我认为问题可能出在router-outlet 上,因为在app.Component.html中我可以使用这些组件.

感谢您的时间和帮助.

我已经try 了以下内容:

  • 重新启动服务器、关闭终端和使用新终端打开服务器
  • 使用准确的路径手动导入零部件,但ANGLING没有找到它

推荐答案

经验法则是,当您想要使用您的组件时,您需要在declarations列表中定义组件

既然你已经在你的路由中定义了SignInComponent,你应该像这样在你的代码中添加它.

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    SliderComponent,
    ContactFormComponent,
    FooterComponent,
    HomeComponent,
    SignInComponent // add here
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    RouterModule.forRoot(appRoutes),
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }

Typescript相关问答推荐

如何在类型脚本中声明对象其键名称不同但类型相同?

动态调用类型化函数

如何将类型从变量参数转换为返回中的不同形状?

具有泛型类方法的类方法修饰符

对于合并对象中的可选属性(例如选项),类型推断可能是错误的

PrimeNG日历需要找到覆盖默认Enter键行为的方法

在实现自定义主题后,Angular 不会更新视图

如何使用类型谓词将类型限制为不可赋值的类型?

<;T扩展布尔值>;

限制返回联合的TS函数的返回类型

垫表页脚角v15

如何将父属性类型判断传播到子属性

编译TypeScrip项目的一部分导致错误

如何在React组件中指定forwardRef是可选的?

如何避免从引用<;字符串&>到引用<;字符串|未定义&>;的不安全赋值?

当数组类型被扩展并提供标准数组时,TypeScrip不会抱怨

是否可以在类型脚本中定义条件返回类型,而不在函数体中使用类型转换?

如何在Reaction Native中关注屏幕时正确更新状态变量?

如何在Type脚本中创建一个只接受两个对象之间具有相同值类型的键的接口?

如何使对象同时具有隐式和显式类型