[英]In angular 8 data input data binding is not working?
This question is asked multiple times before and I satisfied with the all the solutions provided.这个问题之前被问过多次,我对提供的所有解决方案感到满意。 But I am stuck in the basic problem, ie.
但我陷入了基本问题,即。 how to get the data from the parent component to the child component.
如何从父组件获取数据到子组件。 Don't know what I am doing wrong here!!!
不知道我在这里做错了什么!!!
app.component.ts app.component.ts
import { Component } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
message: string = "Hello World!";
constructor() {
//
}
ngOnInit() {
//
}
}
app.component.html应用程序组件.html
<div class="app">
<div class="menu">
<app-menu></app-menu>
</div>
<div class="body">
<div class="container">
<router-outlet></router-outlet>
</div>
</div>
<footer>
<app-footer></app-footer>
</footer>
</div>
footer.component.ts页脚.component.ts
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-footer',
templateUrl: './footer.component.html',
styleUrls: ['./footer.component.scss']
})
export class FooterComponent implements OnInit {
@Input() message: string;
constructor() {}
ngOnInit() {
console.log(this.message);
}
}
The ngOnInit()
function call on the footer.component.ts
always returns undefined
该
ngOnInit()
的函数调用footer.component.ts
总是返回undefined
You haven't bound the app-root's message to the child component.您尚未将 app-root 的消息绑定到子组件。 Templates are isolated from each other and doesn't inherit any attributes from the parent that renders them.
模板彼此隔离,并且不会从呈现它们的父级继承任何属性。 Instead, you must pass data to the templates using data-binding.
相反,您必须使用数据绑定将数据传递给模板。
Try this:尝试这个:
<footer>
<app-footer [message]="message"></app-footer>
</footer>
Please see Template Syntax请参阅模板语法
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.