角6.1.1 @输入不起作用

时间:2018-07-28 00:48:57

标签: angular

我是angular的新手,我正试图将数据从父组件传递给子组件,目前我正在逐步学习本教程,该教程的发布时间已满1年,所以我想知道是否对angular进行更改不会让我完成这个工作。

模块

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

import { AppFather } from './app.father';
import { AppSon } from './app.son';

@NgModule({
  declarations: [
    AppFather, AppSon
  ],
  imports: [
    BrowserModule
  ],
  bootstrap: [AppFather, AppSon]
})
export class AppModule { }

app.father.ts

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

@Component({
  selector: 'app-father',
  templateUrl: './app.father.html',
})
export class AppFather {
  firstMessage = {
       number: 1,
       message: 'Hi, how are you'             
  };
}

app.son.ts

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

@Component({
    selector: 'app-son',
    templateUrl: './app.son.html',
})
export class AppSon {
    @Input() message;
}

app.father.html

<h1>Father</h1>
<app-son [message]="firstMessage"></app-son>

app.son.html

<h3>{{message.message}}</h3>
<h3>{{message.number}}</h3>

1 个答案:

答案 0 :(得分:1)

我看到的一个可能的问题是bootstrap: [AppFather, AppSon]。可能应该只是bootstrap: [AppFather]