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

Question

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

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

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

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>

Answer 1

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

以下解决了我的猴子模块问题： parent.component.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 {
}

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

How to ensure component is part of module / nest component in a template?

angular

components

parent-child

outlet