@Input父子组件绑定

Question

我正在使用this代码测试父/子@输入装饰器。

我期望在子页面上看到"Example: Hello Angular 7“，我只看到"Example:”

这是父组件文件：

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

@Component({
  selector: 'app-parent',
  template: `
    <app-child [childExample]="parentExample"></app-child>
  `
 })
export class ParentComponent{
parentExample: string = 'Hello Angular 7';

}

下面是子组件代码：

import { Component, Input } from '@angular/core';
@Component({
  selector: 'app-child',
  template: `
      Example: {{ childExample }}
  `
})
export class ChildComponent {
  @Input() childExample: string;
}

这是app.component.html组件

<app-nav></app-nav><router-outlet></router-outlet>

这是我的一个删节的app.module.ts文件：

import { BrowserModule } from '@angular/platform-browser'
import { NgModule } from '@angular/core'
import { ParentComponent } from './parent.component'
import { ChildComponent } from './child.component'

@NgModule({
  declarations: [
    AppComponent,
    CreditCardComponent,
    ParentComponent,
   ChildComponent   
  ],
  imports: [
   BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,


  ],
  providers: [
  { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
  { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },
  StripeComponent

  ],
  bootstrap: [AppComponent]

})
export class AppModule { }

这是app-routing.module

import { ParentComponent } from './parent.component'
import { ChildComponent } from './child.component'

const appRoutes: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent},
{ path: 'stocks', component: StocksComponent, canActivate: [AuthGuard] },
{ path: 'register', component: RegisterComponent },
{ path: 'login',  component: LoginComponent},
{ path: 'stripe',  component: StripeComponent},
{ path: 'cc',  component: CreditCardComponent},
{ path: 'parent',  component: ParentComponent},
{ path: 'child',  component: ChildComponent},

Answer 1

Eliseo是正确的。我没有渲染'app-parent‘元素。一旦我这样做了，它就起作用了。