@Input undefined on ngOnInit angular 2

по какой-то причине я не могу получить доступ к значению @Input свойства, даже если я попытаюсь использовать метод ngOnInit().@Input undefined on ngOnInit angular 2

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

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); 
    } 
}

Это всегда неопределенный и шаблон <h1>{{ title }}</h1> оказывают пустое значение ,

Что мне не хватает? Я делал это несколько раз раньше и всегда работал.

источник

2016-03-28 nicowernli

@Input() не поддерживается на корневых компонентов.

Обходной с помощью ElementRef прочитать атрибут императивно:

class AppComponent { 
    constructor(elm: ElementRef) { 
     this.title = elm.nativeElement.getAttribute('title'); 
    } 
}

Входы инициализируются только для компонентов или директив, которые добавляются в шаблон углового компонента. Элемент <body> не является угловым компонентом.

Смотрите также https://github.com/angular/angular/issues/1858

Эта проблема может также иметь отношение https://github.com/angular/angular/issues/6370, поскольку корневой компонент добавляется с помощью DynamicComponentLoader.loadAsRoot()

источник

2016-03-28 12:43:59

Входы не могут использоваться на корневом компоненте (тот, который вы предоставили при загрузке приложения) вашего приложения. Это не поддерживается.

Вы должны ссылаться на атрибут самостоятельно, используя nativeElement (и его метод getAttribute) из введенного компонента ComponentRef в своем компоненте.

Нечто подобное:

@Component ({ ... }) 
export MyComponent { 
    constructor(compRef:ComponentRef) { 
    var someAttrValue = compRef.nativeElement.getAttribute('someAttr'); 
    } 
}

источник

2016-03-28 12:43:37

@Input undefined on ngOnInit angular 2

ответ

Смежные вопросы