Angular：将消息从父节点传递给子节点不起作用

Question

我试图将父值传递给孩子。 但该消息仅显示在父组件中，而不显示在子组件中。 我的代码出了什么问题？ 或者我需要导入app.module中的内容吗？

父：

@Component({
  selector: 'app-neues-spiel',
  template: `
      <app-seating-order [childMessage]="parentMessage"></app-seating-order>
  `,
  styleUrls: ['./neues-spiel.component.scss']
})
export class NeuesSpielComponent implements OnInit {
  parentMessage = "message from parent";

子：

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-seating-order',
  template: `
      {{childMessage}}
  `,
  styleUrls: ['./seating-order.component.scss']
})
export class SeatingOrderComponent implements OnInit {

  @Input() childMessage: string;

  constructor() { }

编辑：

Console或Webpack中没有错误。

但如果我结束服务， 控制台显示错误，但不确定是否相关：

没有html，还有带代码的component.html文件，但我将其评论为使用模板进行测试。

编辑： 应用模块

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AngularFireModule} from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { AngularFireAuthModule } from 'angularfire2/auth';
import { FormsModule } from '@angular/forms';
import { AuthService } from './core/auth.service';
import { AngularFireDatabase } from 'angularfire2/database-deprecated';
import { environment } from './../environments/environment';
import { AppComponent } from './app.component';
import { AppNavbarComponent } from './app-navbar/app-navbar.component';
import { AngularFontAwesomeModule } from 'angular-font-awesome';
import { HomeComponent } from './home/home.component';
import { SettingsComponent } from './settings/settings.component';
import { LoginComponent } from './login/login.component';
import { RegisterComponent } from './register/register.component';
import { RouterModule, Routes, CanActivate } from '@angular/router';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import { NeuesSpielComponent } from './neues-spiel/neues-spiel.component';
import { SeatingOrderComponent } from './seating-order/seating-order.component';

const appRoutes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'settings', component: SettingsComponent },
  { path: 'login', component: LoginComponent },
  { path: 'register', component: RegisterComponent },
  { path: 'neues-spiel', component: NeuesSpielComponent },
  { path: 'seating-order', component: SeatingOrderComponent },
  { path: '',   redirectTo: '/login', pathMatch: 'full' },

  { path: '**', component: PageNotFoundComponent }
];


@NgModule({
  declarations: [
    AppComponent,
    AppNavbarComponent,
    HomeComponent,
    SettingsComponent,
    LoginComponent,
    RegisterComponent,
    PageNotFoundComponent,
    NeuesSpielComponent,
    SeatingOrderComponent
  ],
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireDatabaseModule,
    AngularFireAuthModule,
    AngularFontAwesomeModule,
    RouterModule.forRoot(appRoutes),
    FormsModule,
  ],
  providers: [AuthService, AngularFireDatabase],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

我不确定为什么这不起作用。

但是，您可以进行一次更改并检查是否有效吗？在您的子组件中，您可以尝试使用@Input吗？

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-seating-order',
  inputs: ['childMessage'],
  template: `
   <div>{{childMessage}}</div>
  `,
  styleUrls: ['./seating-order.component.scss']
})
export class SeatingOrderComponent implements OnInit { 
  constructor() { }
}

Answer 2

您应该更改孩子的模板，将其放在某个元素中。例如：

template: `
    <div><h1>{{childMessage}}</h1></div>
`,

<强> DEMO

Answer 3

Console或Webpack中没有错误。

但如果我结束服务， 控制台显示错误，但不确定是否相关：

没有html，还有带代码的component.html文件，但我将其评论为使用模板进行测试。