Question

由于某种原因，即使我尝试使用ngOnInit（）方法，我也无法访问属性的@Input值。

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

console.log(this.title)始终未定义且模板<h1>{{ title }}</h1>呈现空值。

我失踪了什么？我之前做了几次，它总是有效。

Answer 1

根组件不支持

@Input()。

使用ElementRef强制读取属性的解决方法：

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

仅为添加到Angular组件模板的组件或指令初始化输入。 <body>元素不是Angular组件。

另见https://github.com/angular/angular/issues/1858

此问题也可能与https://github.com/angular/angular/issues/6370相关，因为根组件是使用DynamicComponentLoader.loadAsRoot()添加的

Answer 2

不能在应用程序的根组件（引导应用程序时提供的组件）上使用输入。它不受支持。

您需要使用组件中注入的ComponentRef中的nativeElement（及其getAttribute方法）引用您自己的属性。

类似的东西：

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

@Input在ngOnInit angular 2上未定义

2 个答案: