@Input在ngOnInit angular 2上未定义 [英] @Input is undefined on ngOnInit angular 2
问题描述
由于某种原因，即使我尝试使用ngOnInit（）方法，也无法访问属性的@Input值。
for some reason I can't access to the @Input value of a property even if I try from the ngOnInit() method.
index.html
index.html
<html>
<head>
<title>Angular 2 QuickStart</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<!-- 2. Configure SystemJS -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/main')
.then(null, console.error.bind(console));
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app title="Quick start guide">Loading...</my-app>
</body>
</html>
main.ts
import { bootstrap } from 'angular2/platform/browser';
import { AppComponent } from './app.component';
bootstrap(AppComponent);
app.component.ts
app.component.ts
import {Component, Input, OnInit} from 'angular2/core'
@Component({
selector: 'my-app',
template: '<h1>{{ title }}</h1>'
})
export class AppComponent {
@Input() title: string;
constructor() {
}
ngOnInit() {
console.log(this.title);
}
}
那个 console.log（ this.title）始终未定义，模板< h1> {{title}}< / h1> 呈现空值。
That console.log(this.title) is always undefined and the template <h1>{{ title }}</h1> is rendering an empty value.
我缺少什么？我之前做了几次这样做总是有效。
What I'm missing? I did this a few times before and it always worked.
推荐答案
@Input（）。
使用 ElementRef 解决方法强制性地读取属性：
A workaround using the ElementRef to read the attribute imperatively:
class AppComponent {
constructor(elm: ElementRef) {
this.title = elm.nativeElement.getAttribute('title');
}
}
输入仅针对添加的组件或指令进行初始化到Angular组件的模板。 < body> 元素不是Angular组件。
Inputs are only initialized for components or directives that are added to the template of an Angular component. The <body> element is not an Angular component.
另请参阅 https://github.com/angular/angular/issues/1858
此问题也可能与 https://github.com/angular/angular/issues/相关6370 因为根组件是使用 DynamicComponentLoader.loadAsRoot（）
This issue might also be relevant https://github.com/angular/angular/issues/6370 because the root component is added using DynamicComponentLoader.loadAsRoot()
这篇关于@Input在ngOnInit angular 2上未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
