Angular2：輸入綁定

Question

我想這裏定義與組件的輸入綁定：

https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-child 但組件名稱從未顯示

我甚至試圖做的console.log但它表明：

組件名isundefined

<div ng-switch="accessLevel"> 
<div class="customer" ng-switch-when="ENABLED">This is customer data</div> 
<div class="customer-blurr" ng-switch-when="DISABLED"> This is disabled Customer Data</div> 
<div class="customer-blurr" ng-switch-default> <demo-error [componentName]="componentname"></demo-error></div> 
</div> 

和的error.html

<div> you are not allowed to access {{component}} </div> 

演示錯誤：

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

@Component({ 
    selector: 'demo-error', 
    templateUrl: './error.component.html', 
    styleUrls: ['./error.component.css'] 
}) 
export class ErrorComponentDemo implements OnInit { 
@Input() public componentName:string; 
    constructor() { 
    console.log("componentName is" +this.componentName) 
    } 

    ngOnInit() { 
    } 

}

And in **CustomerComponent:** 

@Component({ 
    selector: 'customer', 
    templateUrl: './customer.component.html', 
    styleUrls: ['./customer.component.css'] 
}) 
export class CustomerComponent extends SuperChildComponent{ 
    public allowed: boolean = false; 
    public accessLevel:AccessLevel =null; 
    public componentname:string; 

    constructor(private authenticationService : AuthorizationService) { 
    super(); 
    this.componentname=this.constructor.name; 
    this.accessLevel=this.authenticationService.isUserLoggedIn()?this.authenticationService.componentAccessLevel(this.constructor.name):null; 
    } 

缺少什麼我在這裏？

謝謝

Answer 1

您的輸入將不會在構造函數中可用。試試這個f.e.

@Input set componentName(value: string) { 
    if(value != null && value != undefined) { 
    this._componentName = value; console.log(this._componentName); 
    } 
} 

_componentName: string 

這樣你就可以做你的內set

Answer 2

在if聲明方法的調用，您需要輸「[]」如果你的輸入是一個字符串。

componentName="componentname"