第一级后无法访问 Angular CLI 中的嵌套组件

Question

我是 Angular CLI 的新手，我正在尝试基于我制作的旧网站制作我的第一个网站。到现在为止，我可以在根组件内嵌套和显示组件，但从那时起我无法引用 HTML.

中的任何组件

这是我的代码：

index.html

<!doctype html>
  <html lang="es">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Testing Angular</title>
      <base href="/">
      <link rel="icon" type="image/x-icon" href="favicon.ico">
    </head>
    <body>
      <app-root></app-root>
    </body>
  </html>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';
import { FirstComponent } from './first/first.component';

@NgModule({
  declarations: [AppComponent, FirstComponent],
  imports: [BrowserModule, AppRoutingModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ["./app.component.css"]
})

export class AppComponent {}

app.component.html

<section id="container">
  <app-first></app-first>
</section>

<router-outlet></router-outlet>

first.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SecondComponent } from './second/second.component';

@NgModule({
  declarations: [SecondComponent],
  imports: [CommonModule]
})
export class FirstModule { }

first.component.ts

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

@Component({
  selector: 'app-first',
  templateUrl: './first.component.html',
  styleUrls: ["./first.component.css"]
})

export class FirstComponent {}

first.component.html

<div id="first">
  <app-second></app-second> <!-- This gives an error: it doesn't know whats Second Component -->
</div>

second.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  imports: [CommonModule],
  declarations: []
})
export class SecondModule { }

second.component.ts

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

@Component({
  selector: 'app-second',
  templateUrl: './second.component.html',
  styleUrls: ["./second.component.css"]
})

export class SecondComponent {}

second.component.html

<div id="second">
  <span>I'm second component!</span>
</div>

<app-second></app-second>参考给出了错误。 Visual Studio 代码甚至不在建议列表中。

Answer 1

您必须在某处包含您的模块，angular 对您的 SecondComponent 一无所知，将 FirstModule 或 SecondModule 添加到您的 AppModule。查看 Angular 文档以获得更多策略 https://angular.io/docs

  imports: [BrowserModule, AppRoutingModule, FirstModule],

修改您的 FirstModule，添加包含要与其他模块共享的组件的导出。

exports: [SecondComponent]

第一级后无法访问 Angular CLI 中的嵌套组件

Nested components in Angular CLI not accessible after first level

javascript

typescript

angular-components

angular