我是一个完全的Angular新手(昨天为了一个带回家的工作面试项目才开始学习)，所以如果我问了一些微不足道的问题，我先道歉。
我决定做一个基本的项目来得到一些练习:主组件(app)有两个子组件(main-form和answer)。main-form收集三个数字a、b和c，计算a+bc，并通过app将结果传递给答案。问题是，应答组件没有接收到数据;相反，答案和警告变量(设计为在其中一个输入为null时调用)都是"未定义"的。通过使用控制台和测试按钮，我可以看到值被传递给父组件，而不是兄弟组件。
我把整个项目上传到https://github.com/thestraycat7/angular-question/tree/ad44ad0d14d10fa254141d8d30c7a942e258ba15，以防有人愿意帮助我。我还使用https://medium.com/weekly-webtips/how-to-pass-data-between-components-in-angular-8-c6bfc0358cd2作为一个示例来遵循。如果有人能检查一下我的文档，找出错误在哪里，我将非常感激。
这是一个棘手的跟踪，但问题实际上与您的组件实现无关，但实际上与项目的设置有关:
首先，一些属于index.html的内容被应用到app.component.html中。一般的想法是，index.html将包含网页的顶层HTML，因为你会发现在一个典型的香草JS项目(<html>,<head>,<body>,<script>等)和你的app.component.html将包含你的应用程序代码的顶层(基本上是<body标签的内容)
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Experimenting with Angular</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="oinkicon.ico" />
</head>
<body>
<app-root></app-root>
</body>
</html>
app.component.html
<div class="topnav">
<a>A very simple calculator</a>
</div>
...
其次，在app.module.ts
bootstrap: [AppComponent, AnswerComponent]
需要是
bootstrap: [AppComponent]
当您需要在项目的顶层部署/切换两个不同的根应用程序时，使用bootstrap属性
这在这里是不需要的(总的来说，大多数Angular应用程序几乎都不需要)
删除这一行将把AnswerComponent作为一个典型的非根级组件包含在AppComponent的组件树中。修改后一切正常
'answer'组件不接收数据的原因是你把AnswerComponent作为AppModule引导的一部分(我不确定你为什么要把它)。
你的app模块应该是这样的:
@NgModule({
declarations: [
AppComponent,
AnswerComponent,
MainFormComponent
],
imports: [
FormsModule,
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
现在，Answer组件现在能够接收数据了。
我们通常只使用bootstrap来指定启动Angular应用的根组件。