将数据传递到组件angular5

时间:2018-01-08 23:28:55

标签: typescript components angular-cli angular5

值“name”未在组件中初始化。 有一种方法可以使用装饰器@input将数据传递到组件中吗?

ng -v

Angular CLI:1.6.3

节点:8.9.4

操作系统:linux x64

Angular:5.1.3

我的app.component.ts

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

@Component({
    selector: 'hello-world',
    template: '<p>Hello, {{name}}!</p>',
})
export class HelloComponent {
    @Input() name: string;
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HelloComponent } from './app.component';

@NgModule({
   declarations: [
       HelloComponent
   ],
   imports: [
       BrowserModule,FormsModule
   ],
   providers: [],
   bootstrap: [HelloComponent]
})
export class AppModule { }

的index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Front</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-  scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>

     <hello-world name="World"></hello-world>

</body>
</html>

0 个答案:

没有答案