Angular2：输入绑定

Question

我试图将输入与此处定义的组件绑定：

https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-child，但从未显示组件名称

我什至试图做console.log，但它显示：

componentName未定义

<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

您的输入尚无法在构造函数中使用。 试试这个fe

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

_componentName: string

这样，您可以在set中的if语句中调用方法

Answer 2

如果您输入的是字符串，则需要丢失“ []”。

componentName="componentname"