如何确保组件是模板中模块/嵌套组件的一部分？答案

【问题标题】：How to ensure component is part of module / nest component in a template?如何确保组件是模板中模块/嵌套组件的一部分？
【发布时间】：2020-10-11 22:03:11
【问题描述】：

我正在学习 Angular（不是 AngularJS），但无法让我的模板正确引用组件。目前它似乎没有“看到”被引用的组件，所以我要么没有在正确的位置声明/导入它，要么我使用错误的东西从模板中引用了组件，或者两者兼而有之。

无论哪种方式，我都需要知道如何让我的徽标显示在组件的布局中。

我将提供问题的基本版本：

main.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { MonkeyModule } from './monkey/monkey.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(MonkeyModule)
  .catch(err => console.error(err));

index.html

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

monkey.module.ts

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

import { parentComponent } from './parent.component';
import { childComponent } from './child.component';

@NgModule({
  imports: [
    BrowserModule
  ],
  declarations: [
    parentComponent,
    childComponent
  ],
  providers: [],
  bootstrap: [parentComponent]
})
export class MonkeyModule { }

parent.component.ts

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

import { childComponent } from './child.component';

@Component({
  selector: 'parentComponent',
  templateUrl: './parent.component.html'
})
export class parentComponent {
}

parent.component.html

<div>
This is the Parent!
    <childComponent></childComponent>
</div>

child.component.ts

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

@Component({
  selector: 'childComponent',
  templateUrl: './child.component.html'
})
export class childComponent {
}

child.component.html

<div>
    This is the child.
</div>

【问题讨论】：

如果你使用 ng g c componentname 它会做所有的模块/组件注册。
你能展示/链接一个基本的例子吗？部分问题是你说的可能是对的，但我不知道那是什么意思。
显然“ng g c componentname”指的是node js命令行。它也没有工作：我替换了新组件，它仍然抛出同样的错误。
我认为你需要阅读更多关于 Angular 的内容。 'ng g c componentName' 是 Angular CLI 的基本部分。当我们试图自己做事时，它会导致我们比我们想要的更深入。 Angular CLI 已经创建了组件并自动将它们注册到 app.module 中。在没有 CLI 的情况下学习如何做到这一点并没有什么坏处，但为什么呢？让 CLI 教我们。那么答案是 NGModule 必须导入每个组件并注册它们。
这样做没有用。它输出创建和更新的文件日志，所以我知道我没有错过任何它没有做的事情，手动创建的文件和从 CLI 创建的文件都与我的问题中示例的模式匹配。使用生成组件中的选择器名称和组件名称都会导致我从手动创建的组件中收到相同的错误。

标签： angular components parent-child outlet

【解决方案1】：

经过大量实验，整个问题似乎归结为选择器中的大写字母。

以下解决了我的猴子模块问题：父组件.html

<div>
This is the Parent!
    <child-component></child-component>
</div>

child.component.ts

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

@Component({
  selector: 'child-component',
  templateUrl: './child.component.html'
})
export class childComponent {
}

【讨论】：